CSS'de display özelliği, bir HTML öğesinin belge içinde nasıl görüntüleneceğini belirler. Bu özellik, öğelerin düzenini ve kutu modelinin davranışını kontrol etmek için çok önemlidir. display özelliği sayesinde, bir öğenin blok düzeyinde, satır içi, flex, grid gibi çeşitli gösterim şekilleri arasında geçiş yapılabilir veya öğeyi tamamen gizleyebilirsiniz.

Ana display Değerleri

block: Öğe blok düzeyinde görüntülenir. Yeni bir satıra başlar ve kullanılabilir maksimum genişliği kaplar. div, p ve section gibi öğeler varsayılan olarak block öğeleridir.

inline: Öğe, satır içi olarak görüntülenir ve yalnızca içeriğinin genişliğini kaplar. span ve a gibi öğeler varsayılan olarak inline öğelerdir.

inline-block: Öğeler satır içi olarak görüntülenir ancak width ve height gibi blok öğe özelliklerini alabilir.

none: Öğe görüntülenmez ve belge düzeninden tamamen çıkarılır. Bu, öğenin sanki hiç var olmadığı gibi davranması anlamına gelir.

flex: Öğeyi bir flex konteyner olarak belirler. Bu, içerik öğelerinin esnek bir şekilde düzenlenmesini sağlar.

grid: Öğeyi bir grid konteyner olarak belirler. Bu, içerik öğelerinin ızgara tabanlı bir düzende yerleştirilmesini sağlar.

display özelliği, web sayfası düzenleri oluştururken çok yönlü ve güçlü bir araçtır. Çeşitli display değerlerini kullanarak, geliştiriciler sayfa içeriğinin görünümünü ve davranışını geniş bir yelpazede kontrol edebilirler. Özellikle modern web tasarımında flex ve grid gibi değerler, responsif ve karmaşık düzenler oluşturmak için yaygın olarak kullanılmaktadır.

HTML'de satır içi (inline) öğeler, genellikle metin içeriğine doğrudan etki eden ve kendi içlerinde yeni satırlara neden olmayan öğelerdir. Bunlar, belgenin akışını bozmadan metin içindeki diğer öğelerle aynı satırda yer alabilirler. Inline öğeler, genellikle metni biçimlendirmek, bağlantılar oluşturmak, vurgu yapmak vb. işlevler için kullanılır.

Satır içi öğelerin width (genişlik) ve height (yükseklik) özellikleri üzerinde doğrudan kontrol edilemez ve üst ve alt padding/margin değerleri blok öğelerde olduğu gibi etki etmez. Ancak, sağ ve sol padding/margin değerleri kullanılabilir ve görsel boşluk ekleyebilir.

Yaygın olarak kullanılan bazı satır içi HTML öğeleri şunlardır:

<a>: Bir bağlantı oluşturur.

<span>: Genellikle metni biçimlendirmek için kullanılır.

<img>: Bir görüntü yerleştirir.

<b> ve <strong>: Metni kalın yapar. <strong> semantik olarak daha önemli metni işaretler.

<i> ve <em>: Metni italik yapar. <em> semantik olarak vurgulanan metni işaretler.

<br>: Satır sonu oluşturur. Tek başına kullanıldığında bile satır içi olarak kabul edilir çünkü kendi içinde yeni bir blok başlatmaz.

<input>: Kullanıcı girdisi almak için bir form öğesi yerleştirir.

<label>: Bir form öğesine etiket ekler.

<textarea>: Çok satırlı metin giriş alanı oluşturur. Bu öğe teknik olarak inline-block davranışı gösterir.

<button>: Bir buton oluşturur. Bu öğe de teknik olarak inline-block davranışı gösterir.

Bu liste, HTML'deki tüm satır içi öğeleri kapsamaz, ancak en yaygın kullanılanları içerir.

TailwindCSS: