CSS'te Margin ve Padding Farkı: Yan Yana Karşılaştı…

Q: Padding mi margin mi elementin boyutunu büyütür?

Varsayılan box-sizing: content-box altında padding büyütür: genişliğe ve yüksekliğe eklenir. Margin elementin boyutuna asla eklenmez; çevresine boşluk ekler (width: auto olan bir blok hatta daralır, çünkü margin'leri kullanılabilir genişliğin bir kısmını alır). box-sizing: border-box ile padding bunun yerine genişliğin içinden alınır.

Tek resimde fark

Padding kenarlığın içindedir. Margin dışındadır. Aşağıdaki iki kutu da aynı içeriğe ve aynı 24px değerine sahip; yalnızca özellik farklı. Gri, arkalarındaki kapsayıcıdır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

Padding ile 24px mavidir: kutunun parçasıdır, kenarlığın içindedir ve kutu büyür. Margin ile 24px gridir: kutu metnin çevresinde sıkı kalır ve dışarıdaki boşluk kapsayıcının kenarlarını iter.

İkisini tek kutuda dene

İki kaydırıcıyı hareket ettir. Padding mavi kutuyu büyütür; margin ise kutuyu değiştirmeden gri kenarlardan uzaklaştırır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Boyut satırını izle: padding kaydırıcısını oynattığında değişir, margin kaydırıcısını oynattığında aynı kalır.

Bir bakışta margin ve padding

	Padding	Margin
Nerede	Kenarlığın içinde	Kenarlığın dışında
Arka plan	Elementin arka planını gösterir	Her zaman saydam
Tıklama alanının parçası	Evet	Hayır
Elementin boyutuna eklenir	Evet, `content-box` altında	Hayır
`auto` olabilir	Hayır	Evet (`margin: 0 auto` ortalar)
Negatif olabilir	Hayır	Evet
Dikey değerler çöker	Asla	Evet, bitişik dikey margin'ler çöker
Yüzdeler neye göre	Kapsayıcı bloğun genişliği	Kapsayıcı bloğun genişliği
Tipik kullanım	Butonların, kartların, input'ların içindeki boşluk	Elementler arası boşluk, ortalama

Her özelliğin tüm ayrıntılarıyla kendi sayfası var: CSS padding ve CSS margin.

Hangisini kullanmalı

Tek bir soru sor: boşluk elemente mi ait, yoksa elementlerin arasında mı duruyor?

Bir buton etiketinin çevresindeki alan, bir kartın içi, bir input'un metni ile kenarlığı arasındaki boşluk: padding. Arka planı alır ve hedefi büyütür.
İki paragraf arasındaki, kartlar arasındaki, bir bölümün çevresindeki boşluk: margin, ya da ebeveyn bir flex veya grid kapsayıcıysa gap.

Seçimin en çok önem kazandığı yer tıklama alanıdır. Aşağıdaki iki link sayfada aynı yeri kaplıyor, ama ilkinin boşluğu padding, ikincisininki margin. Yalnızca ilki kolay tıklanıyor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

Kesikli kehribar rengi çerçeve elementin kenarıdır, yani tıklamalara ve dokunuşlara yanıt veren alan. İkinci linkin çevresindeki margin hiçbir şey yapmayan boş bir alandır.

Öğeler arası boşluk: margin mi gap mi

Bir öğe satırı ya da ızgarası için flex veya grid ebeveynindeki gap, genellikle her çocuktaki margin'lerden daha temizdir: yalnızca öğelerin arasına girer, ilkinden önceye ya da sonuncusundan sonraya asla girmez, bu yüzden geri alınacak bir şey kalmaz.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Burada gri kapsayıcı padding kullanıyor (içindeki gri boşluk), öğeler padding kullanıyor (her birinin içindeki yeşil boşluk) ve aralarındaki boşluğu gap hallediyor.

Sık yapılan hatalar

Renkli olması gereken boşluk için margin kullanmak. Margin saydamdır. Boşluk arka planı göstermeliyse o padding'dir.
Bir linki büyütmek için margin kullanmak. Tıklama alanı kenarlıkta biter; padding kullan.
İki 20px dikey margin'in 40px etmesini beklemek. Bitişik dikey margin'ler 20px'e çöker. Padding asla çökmez.
Ortalamak için padding: auto denemek. Yalnızca margin auto kabul eder.
Padding'in kutuyu büyüttüğünü unutmak. width padding'i de kapsasın diye box-sizing: border-box ekle.

Sıkça Sorulan Sorular

Margin ile padding arasındaki fark nedir?

Padding, elementin içinde, içeriği ile kenarlığı arasındaki boşluktur. Margin ise kenarlığın dışında, element ile komşuları arasındaki boşluktur. Padding elementin arka planını gösterir; margin her zaman saydamdır.

Ne zaman margin yerine padding kullanmalıyım?

Elemente ait olan boşluk için padding kullan: bir buton metninin çevresindeki alan, bir kartın içi, arka planı paylaşması ya da tıklanabilir olması gereken her şey. Ayrı elementler arasındaki boşluk için margin (ya da flex ve grid'de gap) kullan.

Padding mi margin mi elementin boyutunu büyütür?

Varsayılan box-sizing: content-box altında padding büyütür: genişliğe ve yüksekliğe eklenir. Margin elementin boyutuna asla eklenmez; çevresine boşluk ekler (width: auto olan bir blok hatta daralır, çünkü margin'leri kullanılabilir genişliğin bir kısmını alır). box-sizing: border-box ile padding bunun yerine genişliğin içinden alınır.

Padding de margin gibi negatif olabilir mi?

Hayır. Negatif padding geçersizdir ve yok sayılır; negatif margin'e ise izin verilir ve elementlerin çakışmasına yol açabilir. Padding auto da olamaz, ortalamanın margin: 0 auto ile yapılmasının nedeni budur.

İlgili kavramlar