CSS display block nedir?

CSS’te display: block, bir elementi blok kutusu olarak görüntüler. Element yeni bir satırdan başlar ve normal akışta bulunduğu kapsayıcının kullanılabilir genişliğini doldurmaya çalışır. Bu nedenle aynı satırdaki kardeş elementleri genellikle aşağı iter. div, p ve başlık elementleri gibi birçok HTML elementi varsayılan olarak blok davranışına sahiptir.

Bu yeni satır davranışı normal blok akışını anlatır. Ebeveyn flex veya grid kullanıyorsa çocukların yerleşimini o düzen belirler; çocuğa block yazmak tek başına alt alta dizilmeyi garanti etmez.

Bu değer, elementin HTML anlamını değiştirmez; yalnızca yerleşimde nasıl davranacağını belirler. Örneğin bir span elementine display: block verirseniz span semantik olarak yine span kalır, fakat görsel olarak blok seviyesinde yerleşir.

Nasıl çalışır?​

Blok element için temel davranışlar şunlardır:

• Yeni satırdan başlar.
• Normal akışta sonraki kardeş elementin altına geçmesine neden olur.
• Genişlik belirtilmemişse, genellikle kapsayıcının genişliğini doldurur.
• Varsayılan yüksekliği içeriğine göre oluşur.
• Genellikle width, height, padding ve margin ile kutu düzeni kurulabilir.

display: block, elementin mutlaka ekranın tamamını kaplayacağı anlamına gelmez. Elementin genişliği; kapsayıcısı, width, max-width, box-sizing ve diğer CSS kurallarıyla sınırlanabilir.

Kısa ve çalıştırılabilir örnek​

Aşağıdaki dosyayı ornek.html adıyla kaydedip tarayıcıda açın:


Beklenen sonuç, iki span elementinin alt alta görünmesidir. Her birinin genişliği 180px içerik alanı ve padding nedeniyle kutu modeline bağlı ek alan içerir. İkinci element, CSS’te display: block bulunduğu için birinci elementin yanına değil altına yerleşir.

İki kutu hâlâ yan yana görünüyorsa stil kuralının doğru elemente uygulanıp uygulanmadığını ve sınıf adının etiket ile eşleştiğini kontrol edin. Başka bir CSS kuralı daha yüksek önceliğe sahipse display: inline veya display: flex gibi bir değer uygulanıyor olabilir. Tarayıcının geliştirici araçlarında elementin hesaplanan display değerini inceleyin.

Block, inline ve inline-block farkı​

Hangi değerin kullanılacağı, elementlerin aynı satırda mı yoksa ayrı satırlarda mı yerleşmesi gerektiğine göre seçilmelidir:


Örneğin bir menü bağlantısının tıklanabilir alanını satırın tamamına yaymak istiyorsanız bağlantıya display: block verebilirsiniz. Bağlantıların yan yana kalması gerekiyorsa inline-block veya kapsayıcıda uygun bir flex düzeni daha doğru olabilir. Sadece blok yapmak, birden fazla öğeyi otomatik olarak yan yana dizmez.

Sık yapılan hatalar​

• Tam genişlik varsayımı: display: block genişliği doğrudan sabit bir değere ayarlamaz. Kapsayıcının genişliği ve kutu modeli sonucu etkiler.
• Yan yana dizilmeyi beklemek: Blok elementler normal akışta alt alta gelir. Yan yana yerleşim için flex, grid veya inline-block gibi başka bir düzen gerekir.
• Semantiği değiştirdiğini sanmak: CSS ile span elementini blok yapmak, onu paragraf veya bölüm elementine dönüştürmez. Anlam için uygun HTML elementini seçmek gerekir.
• Kapsayıcıyı göz ardı etmek: Elementin genişliği beklenenden farklıysa üst elementin width, max-width, padding ve taşma kurallarını da kontrol edin.

Kaynaklar​

• MDN: display

Sık sorulan sorular​

display: block ile visibility: hidden aynı şey midir?​

Hayır. display: block blok kutusu oluşturur; visibility veya opacity gibi başka özellikler onun görünmesini yine engelleyebilir. visibility: hidden ise elementi görünmez yaparken normal akıştaki alanını koruyabilir. Bu iki özellik farklı amaçlara hizmet eder.

display: block ile display: none arasındaki fark nedir?​

display: block elementin blok olarak yerleşmesini sağlar. display: none ise elementi yerleşimden tamamen çıkarır; element için sayfada alan ayrılmaz. Sonradan görünür yapmak için uygun bir display değeri yeniden verilmelidir.