CSS display: block, inline, inline-block, flow-root ve none

Dış ve iç görüntü türü

Her kutunun bir dış görüntü türü vardır ve bu, kutunun aynı biçimlendirme bağlamındaki diğer kutuların yanında nasıl duracağını belirler. Ayrıca bir iç görüntü türü vardır ve bu da kutunun içindeki alt kutuların nasıl davranacağını belirler. MDN'nin normal akış rehberi bunu flex örneğiyle açıklar: display: flex verilen bir <div> dışarıya karşı blok öğe gibi davranır, yeni bir satırda başlar ve satır yönündeki tüm alanı kaplar. Bu, dış türün block olmasıdır. İçindeki alt öğeler ise flex biçimlendirme bağlamına katılır; bu da iç türün flex olmasıdır.

Bu ayrımın önemli bir sonucu var: Flex ya da grid kapsayıcısı olan bir öğe hâlâ blok ve satır içi düzene katılır, çünkü dış türü block değeridir. Flex öğelerinin kendileri ise iç türü flow olan kutulardır; yani bir flex öğesinin içindeki paragraf ve bağlantılar, siz değiştirmedikçe normal blok ve satır içi kurallarla dizilir.

• block: Blok kutu üretir; normal akışta öncesinde ve sonrasında satır sonu oluşur.
• inline: Bir ya da daha fazla satır içi kutu üretir; öncesinde ve sonrasında satır sonu oluşmaz. Yer varsa sonraki öğe aynı satırda devam eder.
• flow: İçeriği normal akışla (blok ve satır içi düzen) yerleştirir.
• flow-root: Yeni bir blok biçimlendirme bağlamı oluşturan blok kutu üretir.
• flex ve grid: Alt öğeleri flexbox ya da grid modeline göre yerleştirir.
• table: HTML <table> öğesi gibi davranır.

block, inline ve inline-block farkı

Bu üç değer, düzen kurarken en sık karşılaştırılanlardır. MDN'ye göre inline-block, çevresindeki içerikle birlikte tek bir satır içi kutu gibi akan, ama kendisi bir blok kutu olan öğe üretir ve yerine konan (replaced) bir öğe gibi davranır. Çok anahtar kelimeli karşılığı inline flow-root değeridir; yani dışarıya satır içi, içeride yeni bir blok biçimlendirme bağlamı.

Tablodaki margin satırı MDN'nin margin sayfasına dayanır: <span> ya da <code> gibi yerine konmayan satır içi öğelerde üst ve alt margin'in etkisi yoktur. Bir bağlantıya tıklanabilir alan kazandırmak için dikey padding ve margin'in düzeni etkilemesini istiyorsanız inline-block doğru araçtır. Blok kutuların satır yönündeki tüm alanı kaplaması ise MDN'nin normal akış rehberindeki bir kuraldır: Blok öğelere genişlik vermediğiniz sürece içeren bloklarında olabildiğince geniş yer kaplarlar; genişlik verseniz bile yan yana sığacak yer olsa da alt alta dizilmeye devam ederler.

nav a {
  display: inline-block;
  padding: 0.5em 1em;
  margin-block: 0.25em;
  /* satır içinde kalır, dikey padding ve margin düzene dahil olur */
}

strong.uyari {
  display: block;
  /* satır içi strong artık kendi satırında başlar */
}

İkinci kural MDN'nin normal akış rehberindeki bir örneğe dayanır: Tarayıcı <strong> öğesini varsayılan olarak satır içi gösterir, ama display: block ile blok kutuya dönüştürebilirsiniz. Rehberin vurguladığı nokta şudur: CSS ile görünüm değiştirilebildiği için HTML'de içeriğe en uygun anlamsal öğeyi seçip görüntüsünü CSS ile ayarlamak mümkündür.

Çok anahtar kelimeli sözdizimi

CSS 2, blok ve satır içi türevler için birleşik tek kelimeler kullanıyordu: inline-block, inline-flex, inline-grid gibi. CSS display modülü ise dış ve iç türü ayrı ayrı yazmanızı sağlayan çok anahtar kelimeli sözdizimini tanımlar. Tek kelimelik değerler geriye dönük uyumluluk için desteklenmeye devam eder. MDN'deki eşleşmelerin bir kısmı şöyledir:

Varsayılan tamamlama kuralları da MDN'de belirtilir: Yalnızca dış değer yazarsanız (display: block) iç değer flow olur. Yalnızca iç değer yazarsanız (display: flex) dış değer block olur; tek istisnası ruby olup onun dış türü inline değerine tamamlanır. MDN, yeni sözdizimini desteklemeyen ortamlar için tek değerli yazımı yedek olarak önce yazmayı önerir; tarayıcı anlamadığı bildirimi yok sayar ve öncekini kullanır.

.kapsayici {
  display: inline-flex;
  display: inline flex;
  /* çok anahtarlı yazımı tanıyan tarayıcı ikinciyi uygular,
     tanımayan ilkiyle devam eder */
}

flow-root ve yeni blok biçimlendirme bağlamı

display: flow-root değerinin tek amacı yeni bir blok biçimlendirme bağlamı (BFC) oluşturmaktır. MDN'nin çok anahtarlı sözdizimi rehberi BFC'yi, kutunun içindeki her şeyin içeride kaldığı ve dışarıdakilerin içeri giremediği bir alan olarak tarif eder. Yeni bir BFC oluşturan öğe üç şey yapar: içindeki kayan (float) öğeleri kapsar, dışarıdaki kayan öğelerle çakışmaz ve margin çökmesini bastırır.

BFC oluşturmanın başka yolları da vardır; MDN bunların listesini verir. Kök öğe, kayan öğeler, mutlak konumlu öğeler, inline-block öğeler, tablo hücreleri, overflow değeri visible ve clip dışında olan blok öğeler, contain: layout, content ya da paint olan öğeler, kendileri flex, grid ya da tablo kapsayıcısı olmayan flex ve grid öğeleri, container-type değeri normal olmayan sorgu kapsayıcıları ve çok sütunlu kapsayıcılar bunlardandır. flow-root değerinin farkı, bu işi başka bir yan etki yaratmadan yapmasıdır. Değerin adı da buradan gelir: Kök öğe <html> gibi, içindeki akış için yeni bir kök oluşturur.

.kart {
  display: flow-root;
  border: 5px solid steelblue;
}

.kart .gorsel {
  float: left;
  width: 200px;
  height: 100px;
  /* flow-root sayesinde kayan görsel kartın dışına taşmaz,
     kartın kenarlığı görselin altından geçmez */
}

Bu kalıp MDN'nin BFC rehberindeki örnekten uyarlandı. Kapsayıcıda flow-root olmadığında, kayan öğe akıştan çıktığı için kapsayıcının arka planı ve kenarlığı yalnızca yanındaki içeriği sarar ve kenarlık kayan öğenin ortasından geçer. Aynı etki overflow: auto ile de alınabilir, ama rehberin belirttiği gibi bu, istenmeyen kaydırma çubukları ya da kırpılmış gölgeler doğurabilir. Margin çökmesine etkisini margin collapsing yazısında ayrıntılı gösterdik.

display: none ve visibility: hidden

display: none öğenin görüntüsünü tamamen kapatır: Öğe düzende hiçbir etki bırakmaz, belge sanki o öğe hiç yokmuş gibi çizilir ve tüm alt öğelerin görüntüsü de kapanır. Öğenin normalde kaplayacağı yeri korumak ama hiçbir şey çizmemek istiyorsanız MDN visibility özelliğini önerir. visibility: hidden değerinde kutu çizilmez ama düzeni normal şekilde etkiler; ayrıca bu öğe odak alamaz.

Erişilebilirlik açısından MDN'nin uyarısı açıktır: display: none öğeyi ve alt öğelerini erişilebilirlik ağacından çıkarır, ekran okuyucular bu içeriği artık seslendirmez. MDN'nin visibility sayfası aynı uyarıyı visibility: hidden için de yapar; yani iki yöntem de içeriği yardımcı teknolojilerden gizler, fark yalnızca düzende yer kaplayıp kaplamamasındadır. Bir öğeyi yalnızca görsel olarak gizleyip yardımcı teknolojilere açık tutmak istiyorsanız bunun için bir dizi özelliğin birlikte kullanıldığı ayrı teknikler gerekir. MDN bir istisnayı da not eder: display: none ile gizlenmiş ama görünür bir öğenin aria-describedby ya da aria-labelledby özniteliğiyle başvurulan öğeler yardımcı teknolojilere açılır.

display: contents

display: contents verilen öğe kendisi için bir kutu üretmez; yerini alt öğelerinin kutuları ve sözde kutuları alır. Pratikte öğenin kendi arka planı, kenarlığı ve padding'i kaybolur, alt öğeleri ise sanki doğrudan büyükbabanın çocuklarıymış gibi düzene katılır. Örneğin bir grid kapsayıcısının içindeki sarmalayıcı <div> öğesine display: contents verirseniz, o sarmalayıcının çocukları grid öğesi olur.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid .grup {
  display: contents;
  /* .grup kutu üretmez; çocukları doğrudan grid öğesi olur */
}

<div class="grid">
  <div class="grup">
    <p>Bir</p>
    <p>İki</p>
  </div>
  <p>Üç</p>
</div>

Tablolar için de benzer bir uyarı vardır: MDN, bazı tarayıcılarda bir <table> öğesinin display değerini block, grid ya da flex yapmanın erişilebilirlik ağacındaki temsilini değiştirdiğini ve tablonun ekran okuyucular tarafından doğru seslendirilmeyebileceğini belirtir.

list-item ve tablo değerleri

display: list-item, öğenin içerik için bir blok kutu ve ayrı bir liste işareti kutusu üretmesini sağlar; böylece herhangi bir öğe liste maddesi gibi davranabilir ve list-style-type ile list-style-position özellikleriyle birlikte kullanılabilir. İç değer yazılmazsa flow, dış değer yazılmazsa block kabul edilir.

table-row, table-cell, table-caption gibi iç değerler ise yalnızca tablo düzeni içinde anlam taşır ve öğeleri sırasıyla <tr>, <td>, <caption> öğeleri gibi davrandırır. Günümüzde sütunlu düzenler için bu değerler yerine genellikle grid ve flexbox tercih edilir.

display değerini animasyonla değiştirmek

MDN'ye göre destekleyen tarayıcılar display özelliğini ayrık (discrete) animasyon türüyle canlandırır; yani değer animasyonun ortasında bir anda değişir. display: none ile ilgili bir istisna vardır: none değerinden görünür bir değere geçişte değer animasyonun başında, görünür bir değerden none değerine geçişte ise sonunda değişir. Böylece içerik animasyon boyunca görünür kalır ve örneğin opacity ile yavaşça kaybolabilir.

Bunu geçişlerle (transition) yapmak için iki ek özellik gerekir: Öğe ilk gösterildiğinde başlangıç değerlerini veren @starting-style kuralı ve display geçişini etkinleştiren transition-behavior: allow-discrete. Bu konunun ayrıntıları CSS transition yazısında anlatılıyor.

Sık yapılan hatalar

• span öğesine width ve dikey margin verip sonuç beklemek: Yerine konmayan satır içi öğede dikey margin etkisizdir; önce inline-block ya da block yapın.
• Gizlemek için her yerde display: none kullanmak: İçerik ekran okuyuculardan da gizlenir. Yalnızca görsel gizleme gerekiyorsa farklı bir teknik seçin.
• Yer korunsun diye display: none beklemek: Yer korunmaz; yerin kalması için visibility: hidden kullanın.
• Float temizlemek için gereksiz overflow: hidden: Gölgeleri kırpabilir; display: flow-root aynı işi yan etkisiz yapar.
• Anlamlı öğelerde display: contents: Bazı tarayıcılarda öğe erişilebilirlik ağacından düşer.
• display: flex verince öğenin satır içi kalacağını sanmak: Tek iç değerde dış tür block olur; satır içi kalması için inline-flex ya da inline flex yazın.

Sık Sorulan Sorular

display: inline-block ile display: inline arasındaki fark nedir?

İkisi de satır içinde akar. inline-block ise kendisi bir blok kutudur: Dikey padding ve margin düzeni etkiler, içinde yeni bir blok biçimlendirme bağlamı oluşur. Çok anahtarlı karşılığı inline flow-root değeridir.

display: flex mi display: block flex mi yazmalıyım?

İkisi aynı anlama gelir. Tek değerli yazım geriye dönük uyumluluk için desteklenir. Çok anahtarlı yazımı kullanacaksanız, MDN'nin önerdiği gibi önce tek değerli yedeği yazabilirsiniz.

display: none ile gizlenen öğe sayfanın yüklenmesini engeller mi?

MDN'nin display sayfası yalnızca öğenin düzende hiçbir etki bırakmadığını ve erişilebilirlik ağacından çıktığını belirtir; kaynak yükleme davranışı bu sayfanın konusu değildir. Sayfa hızı konuları için Core Web Vitals yazısına bakabilirsiniz.

Kapsayıcının yüksekliği neden kayan öğeyi içermiyor?

Kayan öğe normal akıştan çıkar, bu yüzden kapsayıcı onu hesaba katmaz. Kapsayıcıya display: flow-root vererek yeni bir blok biçimlendirme bağlamı oluşturduğunuzda kayan öğe kapsanır.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · CSS kutu modeli · Margin collapsing · Flexbox rehberi · Grid rehberi · position değerleri · Geçiş efektleri