Ribiru ailemize yeni yazar arkadaşlar arıyoruz! Aramıza katılmak isterseniz buraya tıklayın!

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 blockinlineinline-blockflex ve none olduğunu düşünüyorum.

Varsayılan öğelere örnekler:

  • Inlinespanstrongemimg
  • Inline-blockbuttonselect, (Sadece Chrome: textareainput)
  • Blockdivpnavsection

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

Display DeğeriDavranışı
inlineöncelikle metin biçimlendirme için kullanılır, yatay olarak yan yana görünür
inline-blockdikey padding ve margin uygulanmış olarak yatay olarak yan yana görünür
blockkabın tüm genişliğini kaplar, dikey olarak istiflenir
nonebelgede görünmüyor

Zeen is a next generation WordPress theme. It’s powerful, beautifully designed and comes with everything you need to engage your visitors and increase conversions.