10- HTML – CSS Kavramları ve Temelleri İçin Bir Kılavuz: Düzenler

Düzenler: Ekran

Birçok ekran özelliği vardır, ancak en çok kullanılan ve bilinmesi gerekenlerin block, inline, inline-block, flex ve none olduğunu düşünüyorum.

Varsayılan öğelere örnekler:

• Inline: span, strong, em, img
• Inline-block: button, select, (Sadece Chrome: textarea, input)
• Block: div, p, nav, section

Inline (Satır içi)

Satır içi öğeler genellikle metin biçimlendirmesine dayalıdır: metni kalın yapan b veya güçlü veya metni italik yapan i ve em. Aynı satırdalar – yeni bir satır oluşturmazlar. Satır içi öğeler genellikle blok öğeleri içinde yuvalanır. Yatay ve dikey padding ve margin beklendiği gibi uygulanır, ancak dikey margin hiç uygulanmaz ve dikey padding diğer öğeler tarafından yok sayılır.

içerik içerik...<span>span</span>..içerik içerik 

span {
  padding: 15px;
  margin: 15px;
}

Temiz bir kod yazmak için, satır içi öğeler yalnızca metin biçimlendirme için kullanılmalıdır.

Inline Block (Satır içi blok)

Satır içi blok elemanlar, dikey ve yatay padding ve marginlere sahip olmaları dışında inline elemanlar gibidir. Ayrıca varsayılan olarak yatay olarak yan yana görünürler ve yeni satırlarda yığılmazlar.

span {
  display: inline-block;
  padding: 15px;
  margin: 15px;
}

Block (Blok)

Blok öğeler, içerdiği öğelerin tüm genişliğini kapsar ve belgenin yeni satırlarında birbirinin üzerine yığılır.

içerik içerik...
<div>div</div>
..ciçerik içerik

None

Hiçbiri uygulanmamış bir öğe belgede hiç görünmez. Bu, en yaygın olarak mobil için içeriği gizlemek/görüntülemek için kullanılır.

Display Örnekleri