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

Q: Padding kısa yazımında değerler hangi sırada?

Üstten başlayarak saat yönünde: padding: top right bottom left;. Üç değerle üst, sol ve sağ, alt; iki değerle üst ve alt, sonra sol ve sağ; tek değerle dört kenarın hepsi.

Q: Padding bir elementin boyutunu büyütür mü?

Varsayılan box-sizing: content-box ile evet: padding width ve height değerlerine eklenir. box-sizing: border-box ile padding genişliğin içinden alınır, böylece element verdiğin boyutu korur.

Q: Yüzdelik padding neye göre hesaplanır?

Dört kenarın hepsi için kapsayıcı bloğun genişliğine göre. padding-top: 50% ebeveynin yüksekliğinin değil genişliğinin yarısıdır; eski en boy oranı hilelerinin dikey padding kullanmasının nedeni budur.

Q: HTML'de padding nasıl eklenir?

CSS ile, bir stil dosyasında ya da bir style özniteliğinde: . HTML'de genel elementler için bir padding özniteliği yoktur; tablolardaki eski cellpadding özniteliği artık kullanılmıyor ve yerini td ve th üzerindeki padding aldı.

Padding nedir

Padding, bir elementin içindeki, içeriği ile kenarlığı arasındaki boşluktur. Elementin arka planını alır, bu yüzden bir butona, bir karta ya da bir rozete nefes alacak yer veren özellik odur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

Mavi alan içeriktir. Çevresindeki yeşil şerit her kenardaki 24px padding'dir ve kenarlık onun dışında durur.

Padding kısa yazımı: 1, 2, 3 ya da 4 değer

padding dört kenarı tek bildirimde ayarlar. Değer sayısı, üstten başlayıp saat yönünde ilerleyerek hangi kenarın hangi değeri alacağını belirler:

Bildirim	Üst	Sağ	Alt	Sol
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

İki değer "dikey, yatay" demektir. Üç değer "üst, yatay, alt" demektir. Dört değer saat yönünde döner: üst, sağ, alt, sol (İngilizcede yaygın bir hatırlatıcı TRouBLe'dır: Top, Right, Bottom, Left).

Aşağıya herhangi bir kısa yazım gir. Kutu yeniden çizilir ve tarayıcı her kenarın ne aldığını bildirir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

8px, 8px 24px, 0 0 40px ve 1em 5% dene. -10px gibi geçersiz bir değer yok sayılır ve kutu son geçerli padding'i korur.

Her seferinde tek kenar

Her kenarın kendi özelliği vardır; yalnızca birini değiştirmek istediğinde dört değerli bir kısa yazımdan daha anlaşılırdır:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Bir kısa yazım ve ardından tek bir kenar yaygın bir kalıptır: her şeyi ayarla, sonra bir kenarı düzelt.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

Burada sıra önemlidir: padding-bottom'dan sonra yazılan bir padding kısa yazımı alt değeri tekrar 16px'e sıfırlar.

Mantıksal padding: padding-inline ve padding-block

padding-left ve padding-right fizikseldir: her dilde aynı tarafta kalırlar. Mantıksal özellikler ise yazı yönünü takip eder; sağdan sola da gösterilen bir sitede istediğin budur:

Mantıksal özellik	İngilizcede (soldan sağa)	Arapçada (sağdan sola)
`padding-inline-start`	sol	sağ
`padding-inline-end`	sağ	sol
`padding-inline`	sol ve sağ	sağ ve sol
`padding-block`	üst ve alt	üst ve alt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

Padding kutuyu büyütür (border-box değilse)

Varsayılan olarak width yalnızca içeriğin genişliğidir ve padding onun üstüne eklenir. padding: 20px olan width: 200px bir kutu 240px genişliğindedir:

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

box-sizing: border-box kutuyu 200px'te tutar ve padding'i içeriden alır. Hesabın tamamı kutu modeli sayfasında.

Yüzdelik padding

Yüzdelik bir padding, üst ve alt dahil dört kenarın hepsinde ebeveynin genişliğine göre ölçülür:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

16:9 video kutuları için kullanılan eski "padding-top: 56.25%" hilesi buradan geliyor. Bugün aspect-ratio: 16 / 9 aynı işi doğrudan yapıyor.

Butonlarda ve linklerde padding

Bir linki ya da butonu büyütmenin doğru yolu padding'dir, çünkü padding elementin parçasıdır ve dolayısıyla tıklayabileceğin ya da dokunabileceğin alanın parçasıdır. Margin boşluk ekler ama hedefi büyütmez.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

Padding'in kabul ettiği değerler

Değer	Örnek	Notlar
Uzunluk	`12px`, `1rem`, `0.5em`	`em` elementin yazı boyutuyla ölçeklenir
Yüzde	`5%`	Kapsayıcı bloğun genişliğinin
`0`	`padding: 0`	Birim gerekmez
Negatif	`-10px`	Geçersiz, yok sayılır
`auto`	`auto`	Padding için geçersiz (margin için çalışır)

Sık yapılan hatalar

Dört değerli kısa yazımda yanlış sıra. Sıra saat yönündedir: üst, sağ, alt, sol.
Padding ekleyince büyüyen bir kutu. box-sizing: border-box ver.
İki elementi ayırmak için padding kullanmak. Elementler arasındaki boşluk margin'dir; padding tek bir elementin içindeki boşluktur. Bkz. margin ve padding farkı.
Diğer satırlarla çakışan satır içi bir linkte dikey padding. Onu inline-block yap.
Negatif padding ya da padding: auto. İkisi de geçersizdir ve sessizce yok sayılır.

Sıkça Sorulan Sorular

CSS'te padding nedir?

Padding, bir elementin içeriği ile kenarlığı arasındaki boşluktur. Elementin parçasıdır, bu yüzden elementin arka plan rengini gösterir ve bir linkin ya da butonun tıklanabilir alanını büyütür.

Padding kısa yazımında değerler hangi sırada?

Üstten başlayarak saat yönünde: padding: top right bottom left;. Üç değerle üst, sol ve sağ, alt; iki değerle üst ve alt, sonra sol ve sağ; tek değerle dört kenarın hepsi.

Padding bir elementin boyutunu büyütür mü?

Varsayılan box-sizing: content-box ile evet: padding width ve height değerlerine eklenir. box-sizing: border-box ile padding genişliğin içinden alınır, böylece element verdiğin boyutu korur.

Yüzdelik padding neye göre hesaplanır?

Dört kenarın hepsi için kapsayıcı bloğun genişliğine göre. padding-top: 50% ebeveynin yüksekliğinin değil genişliğinin yarısıdır; eski en boy oranı hilelerinin dikey padding kullanmasının nedeni budur.

Padding negatif olabilir mi?

Hayır. Negatif bir padding değeri geçersizdir ve bildirim yok sayılır. İçeriği dışarı çekmek için bunun yerine negatif bir margin kullan.

HTML'de padding nasıl eklenir?

CSS ile, bir stil dosyasında ya da bir style özniteliğinde: <div style="padding: 16px;">. HTML'de genel elementler için bir padding özniteliği yoktur; tablolardaki eski cellpadding özniteliği artık kullanılmıyor ve yerini td ve th üzerindeki padding aldı.

İlgili kavramlar