Çalıştırılabilir CSS Dokümanları: CSS display

Q: block, inline ve inline-block arasındaki fark nedir?

block bir element yeni bir satırda başlar ve kullanılabilir genişliği doldurur. inline bir element metnin içinde akar ve width, height ile dikey margin'leri yok sayar. inline-block inline gibi metnin içinde akar ama bir blok gibi genişlik, yükseklik, padding ve margin kabul eder.

Q: display: none ile visibility: hidden arasındaki fark nedir?

display: none elementi ve kapladığı yeri kaldırır. visibility: hidden ise onu görünmez yapar ama düzendeki yerini korur, böylece hiçbir şey kaymaz.

Q: div varsayılan olarak block mu inline mı?

Block. div, p, başlıklar, ul, section ve form varsayılan olarak block'tur; span, a, strong, em, img, input ve button ise inline ya da inline-block'tur.

display ne yapar

Her elementin nasıl yerleşeceğine karar veren bir display değeri vardır. İlk karşılaştığın üçü block, inline ve inline-block'tur. İşte aynı width, height, padding ve margin değerlerine sahip üç özdeş kutu; yalnızca display farklı:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
Yeni satırda başlar	Evet	Hayır	Hayır
Varsayılan genişlik	Kapsayıcıyı doldurur	İçeriğe uyar	İçeriğe uyar
`width` ve `height`	Uygulanır	Yok sayılır	Uygulanır
Dikey margin	Uygulanır	Yok sayılır	Uygulanır
Dikey padding	İçeriği iter	Boyanır ama satırları birbirinden ayırmaz	İçeriği iter
Tipik elementler	`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `em`	`button`, `input`, `img` (değiştirilen elementler böyle davranır)

Önizlemede block kutu 120px genişliğinde kendi satırında duruyor. Inline olan genişliği ve yüksekliği yok sayıyor ve yalnızca kelimesini sarıyor; dikey padding'i ve kenarlığı satırı hiç uzatmadan satırın üstünden ve altından taşıyor. Inline-block kutu metin satırında kalıyor ama tam boyutunu koruyor.

display: block

Bir blok element kullanılabilir genişliğin tamamını alır ve ardından gelen her şeyi yeni bir satıra iter. Bir linki bloğa çevirmek, bütün bir satırı tıklanabilir yapmanın yoludur:

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

Bir bloğun genişliği ayarlanabilir ve div ortalama sayfasının gösterdiği gibi genişliği olduğunda margin: 0 auto onu ortalar.

display: inline-block

inline-block orta yoldur: bir kelime gibi satırda akar ama boyutlandırılabilir. Metnin içindeki rozetler, butonlar ve ikonlar için kullanışlıdır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

Yan yana duran birkaç inline-block kutu, HTML'deki boşluktan dolayı aralarında küçük bir boşluk alır. Kutu satırları için ebeveyne verilen display: flex daha iyi bir araçtır.

display: none ve visibility: hidden

İkisi de bir elementi görünmez yapar. Fark, yerini koruyup korumamasıdır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
Yer kaplar	Hayır	Evet	Evet
Tıklanabilir	Hayır	Hayır	Evet
Ekran okuyucular okur	Hayır	Hayır	Evet
Yumuşak canlandırılabilir	Hayır	Hayır	Evet

HTML hidden özniteliği, tarayıcının stil dosyası üzerinden display: none ile aynı şeyi yapar; bu da elemente display ayarlayan herhangi bir CSS kuralının (örneğin .card { display: flex; }) onu ezeceği ve elementin yeniden görüneceği anlamına gelir. Bu seni zorlarsa [hidden] { display: none !important; } ekle.

Bir şeyi görsel olarak gizleyip ekran okuyucular için tutmak istiyorsan (örneğin bir ikon butonunun etiketi), display: none yerine bir "visually hidden" class'ı kullan.

display: flex ve display: grid

Bu ikisi bir elementi çocukları için bir düzen kapsayıcısına dönüştürür:

display: flex çocukları hizalama ve boşluk kontrolüyle tek bir satıra ya da sütuna dizer. Bkz. flexbox.
display: grid çocukları aynı anda satırlara ve sütunlara yerleştirir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

Kapsayıcının kendisi blok olarak kalır. inline-flex ve inline-grid çocuklar için aynısını yapar ama kapsayıcıyı inline-block gibi satır içinde akıtır.

Diğer değerler

Değer	Ne yapar
`flow-root`	Float'larını içinde tutan ve çocuk margin'lerinin dışarı sızmasını durduran bir blok; modern "clearfix"
`contents`	Elementin kendi kutusu kaybolur ve çocukları ebeveyninin çocukları gibi davranır. Butonlarda, listelerde ve tablolarda kaçın: bazı tarayıcılar elementin anlamını ekran okuyuculardan düşürür
`list-item`	Liste işaretli bir blok, `li` için varsayılan
`table`, `table-row`, `table-cell`	Tablo olmayan elementlerde tablo düzeni
`inline-flex`, `inline-grid`	Satır içinde duran bir flex ya da grid kapsayıcı

Sık yapılan hatalar

Bir span ya da a elementine width veya height vermek. Satır içi elementler bunları yok sayar. inline-block ya da block kullan.
Satır içi bir elementte dikey margin. Bu da yok sayılır. Çözüm aynı.
Ekran okuyuculara yönelik metni gizlemek için display: none kullanmak. Onu onlardan da gizler.
Bir çocuğun display: none bir ebeveynin içinde görünmesini beklemek. Gizli bir ebeveynin içindeki hiçbir şey çizilmez.
hidden özniteliğini ezen bir display kuralı. CSS kuralı kazanır.
display'i canlandırmaya çalışmak. display: none ayarlamak elementi solma olmadan anında gizler; opacity'yi canlandır ve display'i (ya da visibility'yi) sonda değiştir.

Sıkça Sorulan Sorular

block, inline ve inline-block arasındaki fark nedir?

block bir element yeni bir satırda başlar ve kullanılabilir genişliği doldurur. inline bir element metnin içinde akar ve width, height ile dikey margin'leri yok sayar. inline-block inline gibi metnin içinde akar ama bir blok gibi genişlik, yükseklik, padding ve margin kabul eder.

display: none ne işe yarar?

Elementi sayfadan tamamen kaldırır: yer kaplamaz, çizilmez ve ekran okuyuculardan gizlenir. Çocukları da onunla birlikte gizlenir ve kendi display değerleriyle gösterilemez.

display: none ile visibility: hidden arasındaki fark nedir?

display: none elementi ve kapladığı yeri kaldırır. visibility: hidden ise onu görünmez yapar ama düzendeki yerini korur, böylece hiçbir şey kaymaz.

div varsayılan olarak block mu inline mı?

Block. div, p, başlıklar, ul, section ve form varsayılan olarak block'tur; span, a, strong, em, img, input ve button ise inline ya da inline-block'tur.

inline-block elementlerin arasında neden boşluk var?

HTML'deki etiketler arasındaki boşluk, tıpkı kelimeler arasındaki gibi bir boşluk karakteri olarak çizilir. Bunun yerine ebeveyne gap ile birlikte display: flex ver ya da boşluğu kaldır.

İlgili kavramlar