CSS Box Model Nedir? Margin ve Padding

CSS ile bir kartın genişliğini 300 piksel yaptığınız hâlde ekranda daha büyük göründüğünü hiç fark ettiniz mi? Bunun nedeni çoğu zaman CSS Box Model (Kutu Modeli) olarak adlandırılan ölçülendirme sistemidir. Her HTML elementi, tarayıcı tarafından bir kutu olarak ele alınır. Bu kutunun içeriği, iç boşluğu, kenarlığı ve dış boşluğu birlikte yerleşimi etkiler.

Bu Nizokka Akademi rehberinde content, padding, border ve margin kavramlarını; box-sizing özelliğini, genişlik hesaplamalarını ve mobil uyumlu kart oluşturmayı örneklerle öğreneceksiniz.

1. CSS Box Model Nedir?

Box Model, bir HTML elementinin ekranda kapladığı alanın nasıl hesaplandığını açıklayan CSS modelidir. Temel olarak dört katmandan oluşur:

Content (İçerik): Metin, görsel veya diğer içeriklerin bulunduğu alan.
Padding (İç boşluk): İçerikle kenarlık arasında kalan boşluk.
Border (Kenarlık): Padding ve içeriği çevreleyen çizgi.
Margin (Dış boşluk): Kenarlığın dışında, diğer elementlerle mesafe oluşturan alan.

En içten dışa doğru sıra şöyledir: content → padding → border → margin. Box Model'i anlamak; kart, buton, menü ve sayfa düzenlerindeki beklenmedik boşlukları çözmenizi kolaylaştırır.

2. Content: İçerik Alanı

width ve height özellikleri, varsayılan box-sizing: content-box durumunda elementin içerik alanını tanımlar. Padding ve border bu ölçülere ayrıca eklenir.

.kutu {
  width: 300px;
  height: 120px;
  background-color: #e0f2fe;
}

Bu örnekte kutunun içerik alanı 300 × 120 pikseldir. Ancak birazdan padding ve border eklediğimizde elementin görünen toplam boyutu değişecektir.

3. Padding Nedir? İç Boşluk Nasıl Verilir?

Padding, içerik ile border arasındaki mesafedir. Örneğin bir butonun yazısının kenarlara yapışmasını önlemek için padding kullanırız.

.buton {
  padding: 12px 24px;
  background-color: #2563eb;
  color: white;
}

padding: 12px 24px; ifadesi üst ve alt için 12px, sağ ve sol için 24px boşluk verir.

Padding'in kısa yazım kuralları

CSS	Anlamı
`padding: 16px;`	Dört yöne 16px
`padding: 10px 20px;`	Üst-alt 10px, sağ-sol 20px
`padding: 10px 20px 30px;`	Üst 10px, sağ-sol 20px, alt 30px
`padding: 10px 20px 30px 40px;`	Saat yönünde üst, sağ, alt, sol

İsterseniz padding-top, padding-right, padding-bottom ve padding-left özelliklerini ayrı ayrı da yazabilirsiniz. Padding negatif olamaz.

4. Border Nedir? Kenarlık Oluşturma

Border, içerik ve padding alanının çevresindeki kenarlıktır. Kenarlığın kalınlığı, çizgi tipi ve rengi tanımlanabilir.

.kart {
  border: 2px solid #cbd5e1;
  border-radius: 12px;
}

Burada 2px kalınlığı, solid düz çizgiyi, #cbd5e1 ise rengi belirtir. border-radius köşeleri yuvarlar. Border genişliği, kutunun boyut hesabına dahildir; ancak outline aynı şekilde düzen alanı kaplamaz.

Yalnızca alt kenarlık eklemek

.baslik {
  border-bottom: 3px solid #f59e0b;
  padding-bottom: 8px;
}

5. Margin Nedir? Dış Boşluk Nasıl Kullanılır?

Margin, bir elementin kenarlığının dışındaki boşluktur. Komşu elementler arasına mesafe koymak için sık kullanılır.

.kart {
  margin: 24px;
}

.baslik {
  margin-bottom: 12px;
}

Margin, padding'in aksine içerik alanının veya arka plan renginin bir parçası değildir. Margin negatif değer de alabilir, ancak negatif margin düzeni karmaşıklaştırabileceği için dikkatli kullanılmalıdır.

Bir kartı yatayda ortalamak

.kart {
  width: 320px;
  margin: 24px auto;
}

Bu örnekte üst-alt margin 24px olur; uygun koşullarda sağ ve sol otomatik margin değerleri kullanılabilir yatay boşluğu paylaşarak kutuyu ortalar. Sabit genişliğin küçük ekranlarda taşabileceğini unutmayın; aşağıda daha esnek bir örnek kullanacağız.

6. Padding ve Margin Arasındaki Fark

Özellik	Padding	Margin
Konum	İçerik ile kenarlık arasında	Kenarlığın dışında
Arka plan	Normalde elementin arka planı padding alanına yayılır	Margin alanı elementin arka planıyla boyanmaz
Negatif değer	Kullanılamaz	Kullanılabilir
Tipik kullanım	Butonun veya kartın iç rahatlığı	Elementler arası mesafe

Pratik kural: İçeriğin kutunun kenarına çok yakın olduğunu düşünüyorsanız padding ekleyin. İki kutu birbirine çok yakınsa margin veya yerleşim sisteminin gap özelliğini değerlendirin.

7. CSS Kutu Genişliği Nasıl Hesaplanır?

Varsayılan content-box modelinde, elementin dış kenarlıktan dış kenarlığa toplam genişliği şu şekilde hesaplanır:

Toplam genişlik = width + sol padding + sağ padding + sol border + sağ border

Margin değerleri de çevredeki toplam yer ihtiyacı açısından dikkate alınır ancak kutunun kendi border-box ölçüsüne dahil değildir.

.ornek {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin: 15px;
}

Hesaplayalım:

İçerik genişliği: 300px
Sol ve sağ padding: 20 + 20 = 40px
Sol ve sağ border: 2 + 2 = 4px
Border dahil kutu genişliği: 300 + 40 + 4 = 344px
Her iki taraftaki margin de hesaba katılırsa çevredeki yatay yer ihtiyacı: 344 + 15 + 15 = 374px

Bu nedenle yalnızca width: 300px yazdığınız bir kutu, ekranda 300 pikselden geniş görünebilir.

8. box-sizing: border-box Neden Kullanılır?

box-sizing: border-box, bildirilen genişliğin içeriği, padding'i ve border'ı birlikte kapsamasını sağlar. Bu özellik margin'i kapsamaz.

.ornek {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

Bu defa border dahil kutu genişliği 300px olur. İçerik için kalan genişlik ise 300 − 40 − 4 = 256px olur.

Birçok projede tutarlı ölçülendirme için şu başlangıç kuralı kullanılır:

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

Yalnızca bu kuralı eklemek tüm taşma sorunlarını otomatik olarak çözmez. Sabit genişlikler, uzun kelimeler, görseller ve kapsayıcı ölçüleri yine ayrıca kontrol edilmelidir.

9. Dikey Margin Birleşmesi (Margin Collapsing)

Normal blok yerleşiminde, bazı durumlarda iki dikey margin toplanmak yerine birleşebilir. Örneğin bir paragrafın alt margin'i 20px, sonraki paragrafın üst margin'i 30px ise aralarındaki boşluk 50px değil, 30px olabilir.

.birinci {
  margin-bottom: 20px;
}

.ikinci {
  margin-top: 30px;
}

Bu davranış her zaman geçerli değildir. Örneğin Flexbox ve Grid öğelerinin margin'leri kendi aralarında bu biçimde birleşmez. Ayrıca bir elementin içeriği ve kenarlıkları gibi koşullar da dikey margin birleşmesini etkiler.

Elementler arasında tutarlı boşluk yönetimi istiyorsanız Flexbox veya Grid düzenlerinde gap kullanmak çoğu zaman daha anlaşılırdır.

10. Uygulamalı Örnek: Mobil Uyumlu Bilgi Kartı

Aşağıdaki örnekle iç boşluk, kenarlık, dış boşluk ve box-sizing özelliklerini birlikte kullanalım. Bu örnekleri kendi HTML ve CSS dosyalarınızda çalıştırın.

HTML kodu

<article class="bilgi-karti">
  <h2>Nizokka Akademi</h2>
  <p>HTML ve CSS dersleriyle web geliştirmeye başlayın.</p>
  <a href="/academy">Dersleri keşfet</a>
</article>

CSS kodu

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

.bilgi-karti {
  width: min(100% - 32px, 440px);
  margin: 32px auto;
  padding: 24px;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background-color: #ffffff;
  color: #0f172a;
}

.bilgi-karti h2 {
  margin: 0 0 12px;
}

.bilgi-karti p {
  margin: 0 0 16px;
  line-height: 1.6;
}

.bilgi-karti a {
  color: #1d4ed8;
  font-weight: 700;
}

width: min(100% - 32px, 440px) ifadesi, destekleyen modern tarayıcılarda kart genişliğini kapsayıcının genişliğinden 32px çıkarılmış değer ile 440px arasındaki küçük değer olarak belirler. Böylece kart dar ekranlarda daha rahat sığar.

Deneyin: Kartın padding değerini 24px'ten 40px'e, border kalınlığını 1px'ten 4px'e ve margin değerini 32px'ten 48px'e değiştirin. Hangi değişikliğin içeride, hangisinin dışarıda boşluk oluşturduğunu gözlemleyin.

11. Box Model Hatalarını Tarayıcıda Nasıl Bulursunuz?

Chrome, Firefox veya Edge geliştirici araçlarında bir elementi seçip Computed (Hesaplanan) ya da Layout bölümüne bakarak içerik, padding, border ve margin ölçülerini inceleyebilirsiniz. Panel adları tarayıcıya göre değişebilir.

Beklenmedik genişlik varsa box-sizing değerini kontrol edin.
İçerik kenarlığa yapışıyorsa padding değerine bakın.
Elementler arası boşluk fazlaysa margin veya gap değerlerini inceleyin.
Sayfa yatay kayıyorsa sabit genişlikleri ve taşan içerikleri araştırın.
Odak çerçevesini kaldırmadan tasarlayın: outline, klavye kullanıcıları için önemli bir göstergedir.

12. Sık Sorulan Sorular

Margin mi padding mi kullanmalıyım?

İçeriği kutunun kenarlığından uzaklaştırmak için padding, kutunun dışındaki mesafeyi ayarlamak için margin kullanın. Flexbox ve Grid düzenlerinde öğeler arasındaki düzenli mesafe için gap da değerlendirilebilir.

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

Belirlediğiniz width ve height ölçülerinin içerik, padding ve border'ı birlikte kapsamasını sağlar. Margin yine bu ölçülerin dışındadır.

Margin ile gap aynı şey midir?

Hayır. margin tek bir elementin dış boşluğudur. gap ise Flexbox, Grid ve çok sütunlu düzen gibi sistemlerde öğeler arasındaki aralıkları tanımlar.

Border ile outline arasındaki fark nedir?

border, kutunun ölçülendirmesine katılır. outline ise genel olarak düzen içinde yer kaplamaz ve özellikle klavye odağını göstermek için kullanılır.

13. Sonuç ve Alıştırma

CSS Box Model, web tasarımında ölçü ve boşluk yönetiminin temelidir. content içeriği, padding iç boşluğu, border kenarlığı ve margin dış boşluğu tanımlar. box-sizing: border-box kullanmak ise birçok tasarımda genişlik hesaplamalarını kolaylaştırır.

Alıştırma: İki bilgi kartı oluşturun. Birinde content-box, diğerinde border-box kullanın. Her ikisine aynı genişlik, padding ve border değerlerini vererek geliştirici araçlarında gerçek genişliklerini karşılaştırın.

Nizokka Akademi serimizin sonraki yazısında CSS Flexbox ile kutuları yatay ve dikey eksende hizalamayı öğreneceğiz.

CSS Box Model: Margin, Padding ve Border Farkları