Merhabalar, bu yazımda Block ve Inline kavramlarına bakacağız.
Html’de kullandığımız Tag’ler bunlara farklı yerlerde element kavramıyla da görebilirsiniz, bunlar block ve inline olarak iki bölüme ayrılır.
Block-Level elementler her zaman yeni satırdan başlar ve soldan sağa var olan alanı kaplar. Yani açılış ve kapanış etiketi arasında belirlenen alanı kaplar.
Inline(satır içi) elementler ise adından anlaşılacağı üzere aynı satırda başlayıp içeriği kadar alan kaplar.
Şimdi bunu anlamak için daha önce öğrendiğimiz h1 etiketi ve henüz görmediğimiz span etiketiyle incelemeye çalışalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Burası Başlık Etiketidir.</h1>
<span>Burası bir inline blocktur.</span>
<span>Başka bir inline block.</span>
</body>
</html>Live Server ile çalıştırıp sayfaya bakalım.
H1 etiketinin altına yazdığımız span etiketleri, h1’in block element olması nedeniyle bir alt satırdan başlamıştır.
Ancak span etiketleri inline element olduğu için yan yana kalmıştır.
Block elementlerin bulundukları satırın tamamını kapladığını ama inline elementlerin sadece içerik kadar yer kapladığını nasıl anlayabiliriz?
Henüz style attribute’unu görmemiş olsak da bu durumu gösterebilmek için kullanacağım. Şimdilik bu kısma takılmayınız.
Etiketlere birer background vereceğim. Yani arka plan rengi.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Burası Başlık Etiketidir.</h1>
<span>Burası bir inline blocktur.</span>
<span>Başka bir inline block.</span> <br>
<h1 style="background-color: burlywood;">Burası Başlık Etiketidir.</h1>
<span style="background-color: chartreuse;">Burası bir inline blocktur.</span>
<span style="background-color: cyan;">Başka bir inline block.</span>
</body>
</html>Bu ekrana baktığımızda anlatmak istediğimi çok net anlayabiliyoruz.
Aşağıda Block ve Inline Elementlerin listesine göz atabilirsiniz
Bir sonraki yazımda görüşmek üzere.
Hüzünlü bir selam. Bu yazı dizisine başlarken büyük umutlarım vardı. Oly’nin FIP durumunu erken teşhis…
Selamlar, bu yazımda sizlere Oly’nin çıkan PCR sonucu ve geçtiğimiz bir haftada hastalığın genel seyrinden…
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…