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

Q: box-sizing: border-box ne işe yarar?

width ve height değerlerinin padding ile border'ı içermesini sağlar. padding: 20px ve 5px kenarlığa sahip width: 200px bir kutu bu durumda tam 200px genişliğinde olur ve içerik alanı sığmak için 150px'e küçülür. Varsayılan content-box ise padding ve border'ı üstüne ekler ve sonuç 250px olur.

Q: Bir elementin toplam genişliği nasıl hesaplanır?

Varsayılan content-box ile: width + sol ve sağ padding + sol ve sağ border. border-box ile: yalnızca width. Margin iki durumda da kutunun dışındadır, bu yüzden elementin kendi genişliğine değil kapladığı alana eklenir.

Q: Her şeye box-sizing: border-box vermeli miyim?

Çoğu proje stil dosyasının en başında , ::before, *::after { box-sizing: border-box; } ile bunu yapar. Yüzdelik genişliklerin ve padding'in insanların beklediği gibi toplanmasını sağlar; Bootstrap ve Tailwind gibi framework'ler de aynı sıfırlamayla gelir.

Her kutunun dört katmanı

Bir sayfadaki her element, içeriden dışarıya dört katmandan oluşan bir dikdörtgen olarak çizilir:

Content: metin, resim ya da çocuk elementler; boyutu width ve height ile belirlenir.
Padding: kutunun içinde, içerik ile kenarlık arasındaki boşluk. Elementin arka planını gösterir.
Border: padding'in çevresindeki çizgi.
Margin: kenarlığın dışında, diğer kutuları iten boşluk. Her zaman saydamdır.

Örnekte her katmanın kendi rengi var: mavi içerik, yeşil padding, koyu bir kenarlık ve kutunun çevresinde margin olan kehribar rengi bir alan (margin'in kendisi saydam olduğu için bir sarmalayıcı tarafından çiziliyor).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

Kutunun altındaki satırı tarayıcı ölçüyor: 160 + 20 + 20 + 10 + 10 = 220px. Margin bunun her iki yanına 24px daha ekler, ama kutunun dışında olduğu için 220'nin parçası değildir.

Genişlik hesabı: content-box ve border-box

Varsayılan olarak (box-sizing: content-box) width yalnızca içeriği ayarlar. Padding ve border üstüne eklenir, bu yüzden kutu yazdığın sayıdan daha geniş olur. box-sizing: border-box ile width kutunun tamamıdır ve içerik, padding ile border'a yer açmak için küçülür.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid #111827;
      background: #e5e7eb;
      margin-bottom: 12px;
    }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="box content">content-box</div>
  <div class="box border">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.getBoundingClientRect().width + 'px wide';
    });
  </script>
</body>
</html>

	`content-box` (varsayılan)	`border-box`
`width` ne demek	İçerik	İçerik + padding + border
`width: 200px; padding: 20px; border: 5px`	250px genişlik	200px genişlik
Bu durumda içerik alanı	200px	150px
Margin	Dışarıda, sayılmaz	Dışarıda, sayılmaz

border-box sıfırlaması

border-box boyutların toplanmasını kolaylaştırdığı için neredeyse her modern stil dosyası bu kuralla başlar:

*,
*::before,
*::after {
  box-sizing: border-box;
}

En çok yüzdelerle önem kazanır. Padding'i olan iki width: 50% sütun, content-box altında tek satıra sığmaz, çünkü her biri %50 artı kendi padding'idir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

(HTML yorumları, inline-block sütunlar arasındaki boşluğu kaldırır; aksi halde bu boşluk birkaç piksel eklerdi.)

Kutu modelini DevTools'ta görmek

Her tarayıcı kutu modelini senin için çizer. Bir elemente sağ tıkla, Inspect'i seç ve Computed sekmesini aç (Firefox'ta Layout): bir şema ortada içerik boyutunu, çevresinde padding, border ve margin değerlerini gösterir. Elements panelinde bir elementin üzerine gelmek de sayfayı renklendirir: içerik mavi, padding yeşil, margin turuncu.

Satır içi kutular farklı kurallara uyar

Yukarıdaki kutu modeli <div> ve <p> gibi blok kutuları anlatıyor. <span>, <a> ve <strong> gibi satır içi elementler bir metin satırının içinde kırılır ve dikey boşluğu farklı ele alır:

Özellik	Satır içi bir elementte
`width`, `height`	Yok sayılır
Yatay padding, border, margin	Uygulanır ve komşuları yana iter
Dikey padding ve border	Çizilir, ama üst ve alt satırları itmez
Dikey margin	Yok sayılır

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

display: inline-block, bir satırın içindeki elemente kutu modelinin tamamını verir: genişliği, yüksekliği, padding'i ve margin'i yer kaplar. Her katmanın ayrıntısı için CSS padding ve CSS margin sayfalarına bak.

Sık yapılan hatalar

Sabit genişlikli bir kutuya padding ekleyip neden büyüdüğünü merak etmek. content-box altında padding ve border width değerine eklenir. border-box kullan.
Margin'in arka plan rengini almasını beklemek. Margin her zaman saydamdır; renkli boşluk için padding kullan.
Satır içi bir elemente height ya da dikey margin vermek. Hiçbir şey olmaz; display: inline-block ya da block kullan.
Hesapta kenarlıkları unutmak. width: 100% olan bir elementteki 1px kenarlık, onu content-box altında 2px fazla genişletir ve bu yatay bir kaydırma çubuğuna yol açabilir.
Margin ile padding'i karıştırmak. Kısa hali: padding kenarlığın içinde, margin dışındadır. Margin ve padding farkı sayfası ikisini yan yana koyuyor.

Sıkça Sorulan Sorular

CSS kutu modeli nedir?

Her elementin dört katmandan oluşan dikdörtgen bir kutu olarak çizildiği kuraldır: içerik, onun çevresindeki padding, padding'in çevresindeki border ve border'ın dışındaki margin. CSS'teki genişlik, yükseklik ve boşlukların hepsi bu katmanlar üzerinde ayarlanır.

box-sizing: border-box ne işe yarar?

width ve height değerlerinin padding ile border'ı içermesini sağlar. padding: 20px ve 5px kenarlığa sahip width: 200px bir kutu bu durumda tam 200px genişliğinde olur ve içerik alanı sığmak için 150px'e küçülür. Varsayılan content-box ise padding ve border'ı üstüne ekler ve sonuç 250px olur.

Bir elementin toplam genişliği nasıl hesaplanır?

Varsayılan content-box ile: width + sol ve sağ padding + sol ve sağ border. border-box ile: yalnızca width. Margin iki durumda da kutunun dışındadır, bu yüzden elementin kendi genişliğine değil kapladığı alana eklenir.

Margin kutu modelinin parçası mı?

Evet, en dıştaki katmandır, ama her zaman saydamdır ve elementin kendi genişliğine ya da arka planına hiç sayılmaz. Yalnızca komşu kutuları iter.

Her şeye box-sizing: border-box vermeli miyim?

Çoğu proje stil dosyasının en başında *, *::before, *::after { box-sizing: border-box; } ile bunu yapar. Yüzdelik genişliklerin ve padding'in insanların beklediği gibi toplanmasını sağlar; Bootstrap ve Tailwind gibi framework'ler de aynı sıfırlamayla gelir.

İlgili kavramlar