Display özelliği

CSS kursu · Başlangıç · Ders 66/82

block, inline ve inline-block değerlerini öğrenirsin.

Display özelliği ne işe yarar?

CSS'te display özelliği bir ögenin nasıl dizileceğini belirler. Üç yaygın değer vardır: block (blok), inline (satır içi) ve inline-block (satır içi blok). Bu değer, ögenin yeni satır açıp açmayacağını ve genişlik ile yükseklik alıp alamayacağını denetler.

Örneğin bir a bağlantısı varsayılan olarak satır içidir; yan yana dizilir. Ama display: block verirsen her bağlantı kendi satırına geçer.

block: yeni satır, tam genişlik

block değerindeki bir öge yeni satırda başlar ve yeni satırda biter; bulunduğu satırı kaplar. Genişlik, yükseklik, üst ve alt kenar boşlukları tam uygulanır. Tipik blok ögeler: div, p, h1, ul, section.

Bu yüzden iki blok öge yan yana değil alt alta dizilir. Yatay yerleşim için flexbox ya da grid kullanmak gerekir.

inline ve inline-block

inline değerindeki ögeler yan yana akar; yeni satır açmaz. Genişlik ve yükseklik bildirimleri işe yaramaz; yalnızca yatay kenar boşlukları etkili olur. Tipik satır içi ögeler: span, a, em, strong.

inline-block ise ikisini birleştirir: satır içinde dizilir ama genişlik, yükseklik ve dikey kenar boşlukları da çalışır. Düğme görünümlü bağlantılar için idealdir.

Uygulama Menü bağlantılarını diz

İki stil bloğu ekle. Birincisi a.button sınıf seçicisi; display: inline-block ve padding: 0.5rem 1rem tanımlasın. İkincisi nav a alt seçici; display: block tanımlasın (böylece her bağlantı kendi satırına geçer).

Örnek çözümü göster

/* menü bağlantılarını diz */
a.button {
  display: inline-block;
  padding: 0.5rem 1rem;
}
nav a {
  display: block;
}

Kendini test et

Hangi HTML etiketi varsayılan olarak blok ögedir?
- span
- p
- a
- strong
Cevabı göster

p — Doğru. p etiketi varsayılan olarak blok ögedir; yeni satırda başlar.

Bağlantıyı satır içi blok yap

a.button {
  ____;
  padding: 0.5rem 1rem;
}

Cevabı göster

a.button {
  display: inline-block;
  padding: 0.5rem 1rem;
}

Değeri diziliş biçimine eşle

block

Yeni satır, tam genişlik
inline

Yan yana, genişlik yok
inline-block

Yan yana, genişlik var

Display özelliği