CSS Kutu Modeli: Content, Padding, Border ve Margin

Kutunun dört alanı

MDN, standart temel kutu modelini dört alan ve bu alanları sınırlayan dört kenar üzerinden tanımlar: içerik kenarı, padding kenarı, border kenarı ve margin kenarı. Her alan bir öncekini dışarıya doğru genişletir. Bu yüzden bir kutuyu düşünürken içten dışa doğru ilerlemek en kolay yoldur.

• İçerik alanı (content area): Metin, görsel ya da video oynatıcı gibi asıl içeriğin bulunduğu bölümdür. Boyutlarına içerik genişliği ve içerik yüksekliği denir. Varsayılan box-sizing: content-box ayarında blok bir öğenin width, height, min-width, max-width, min-height ve max-height değerleri doğrudan bu alanın boyutunu belirler.
• Padding alanı: İçerik alanını öğenin iç boşluğu kadar genişletir. Kalınlığı padding-top, padding-right, padding-bottom, padding-left ve bunları tek satırda toplayan padding kısayoluyla ayarlanır.
• Border alanı: Padding alanını kenarlık kalınlığı kadar genişletir. Kalınlık border-width ya da border kısayoluyla verilir.
• Margin alanı: Kenarlığın dışındaki boş alandır ve öğeyi komşularından ayırır. margin-top, margin-right, margin-bottom, margin-left ve margin kısayoluyla ayarlanır.

Arka plan konusunda küçük ama önemli bir ayrıntı var: Bir kutuya background-color ya da background-image verdiğinizde arka plan varsayılan olarak border alanının dış kenarına kadar uzanır, yani kenarlığın altına da boyanır. Kenarlık düz ve opak olduğunda bunu fark etmezsiniz; kesik çizgili (dashed) ya da yarı saydam bir kenarlıkta arka plan aralardan görünür. Bu davranışı background-clip değiştirir. Arka plan margin alanına uzanmaz; orada ebeveynin zemini görünür.

.kart {
  width: 300px;
  padding: 20px;
  border: 5px dashed teal;
  margin: 16px;
  background-color: lightyellow;
  /* arka plan kesik kenarlığın boşluklarından da görünür */
}

.kart-icerik-boyali {
  background-clip: content-box;
  /* arka plan yalnızca içerik alanına boyanır, padding şeffaf kalır */
}

background-clip özelliğinin border-box, padding-box ve content-box değerleri doğrudan kutu modelinin katmanlarına karşılık gelir: padding-box kenarlığın altını boyamaz, content-box ise yalnızca içerik alanını boyar. Hata ayıklarken bir kutuya geçici olarak background-clip: content-box vermek, içerik alanının gerçekte nerede bittiğini görmenin pratik bir yoludur.

margin, padding ve border kısayollarının değer sırası

margin ve padding kısayolları bir ile dört arasında değer alır ve değer sayısına göre kenarlara farklı biçimde dağıtılır. Dört değerli yazım üstten başlayıp saat yönünde ilerler: üst, sağ, alt, sol. Bu sırayı akılda tutmak için saat kadranını düşünmek yeterlidir.

Üç değerli yazım en çok karıştırılan durumdur: Birinci değer üste, ikinci değer hem sağa hem sola, üçüncü değer alta uygulanır. Sol kenar için ayrı bir değer olmadığından sol, sağın değerini kopyalar. İki değerli yazımda ise ilk değer üst ve altı, ikinci değer sol ve sağı belirler.

.bolum {
  margin: 1em auto 2em;
  /* üst: 1em | sağ ve sol: auto | alt: 2em */
  padding: 5% 10%;
  /* üst ve alt: %5 | sağ ve sol: %10 */
}

.uyari {
  border: 2px dotted;
  /* kalınlık ve stil verildi, renk currentColor olur */
}

border kısayolu farklı çalışır: Kalınlık (<line-width>), stil (<line-style>) ve renk (<color>) bileşenlerinden bir, iki ya da üçünü herhangi bir sırada alır ve dört kenarın hepsine aynı kenarlığı uygular. Yazmadığınız bileşen başlangıç değerine döner: kalınlık medium, stil none, renk currentColor olur. Buradaki tuzak şudur: Stil varsayılan olarak none olduğu için border: 2px red; yazdığınızda hiçbir kenarlık görmezsiniz. Kenarlığın görünmesi için stil bileşeni mutlaka verilmelidir.

MDN bir ayrıntıya daha dikkat çeker: border kısayolu border-image için özel değer belirleyemez, onu başlangıç değeri olan none değerine sıfırlar. Kenarları birbirinden farklı yapmak istediğinizde border-width, border-style ve border-color uzun yazımlarını ya da border-top gibi tek kenar özelliklerini kullanabilirsiniz.

Değer türleri: uzunluk, yüzde ve auto

Margin değeri <length>, <percentage> ya da auto anahtar kelimesi olabilir. Padding ise yalnızca <length> ve <percentage> kabul eder. İki özellik arasındaki en önemli fark negatif değerlerdedir: Negatif margin geçerlidir ve öğeyi komşularına varsayılandan daha fazla yaklaştırır; negatif padding ise geçersizdir ve tarayıcı tarafından yok sayılır.

Yüzde değerlerde sık yapılan bir yanlış var. Hem margin hem padding için yüzde, içeren bloğun satır yönündeki boyutuna göre hesaplanır. Yatay yazılan bir dilde bu, içeren bloğun genişliği demektir. Yani padding-top: 10% yazdığınızda üst boşluk yüksekliğin değil genişliğin yüzde onudur. İçeren bloğun nasıl belirlendiğini position yazısında ayrıntılı olarak bulabilirsiniz.

.kapsayici {
  width: 400px;
  height: 160px;
}

.kapsayici p {
  margin: 5%;
  /* 400px * 0.05 = 20px, dört kenarda da (üst ve alt dahil) */
  padding: 5%;
  /* 400px * 0.05 = 20px, yükseklik (160px) hesaba girmez */
}

Bu örnek MDN'nin içeren blok rehberindeki hesaba dayanır: Kapsayıcı 400 piksel genişliğinde ve 160 piksel yüksekliğinde olduğunda margin: 5% ile padding: 5% her kenarda 400 x 0,05 = 20 piksel verir. Üst ve alt boşluk da 160 pikselden değil 400 pikselden hesaplanır.

auto değerinde ise boşluğu tarayıcı seçer. En bilinen kullanımı yatay ortalamadır: Genişliği belirlenmiş bir blok öğeye margin: 0 auto; verdiğinizde sol ve sağ dış boşluklar eşit paylaştırılır ve öğe ebeveyninin ortasına yerleşir. MDN aynı yerde daha yaygın bir yöntem olarak ebeveyne display: flex ve justify-content: center verilmesini de anar. Ortalama yöntemlerinin karşılaştırması için CSS ortalama yöntemleri yazısına bakabilirsiniz.

Satır içi öğelerde kutu modeli

Kutu modeli her öğe için geçerlidir ama satır içi (inline) öğelerde bazı katmanlar düzeni farklı etkiler. MDN iki kuralı açıkça belirtir. Birincisi: <span> ya da <code> gibi yerine konmayan (non-replaced) satır içi öğelerde üst ve alt margin değerlerinin hiçbir etkisi yoktur. İkincisi: Bu tür öğelerin satır yüksekliğine katkısını line-height belirler; padding ve kenarlık öğenin çevresinde yine çizilir ama satırın yüksekliğini artırmaz.

Bunun pratik sonucu şudur: Bir <span> öğesine büyük bir dikey padding verdiğinizde arka planı ve kenarlığı üst ve alt satırlara taşabilir, fakat satırlar arasındaki mesafe değişmez. Dikey boşluğun düzeni gerçekten itmesini istiyorsanız öğenin dış görüntü türünü display: inline-block ya da block yaparak değiştirmeniz gerekir. Bu değerlerin farkını display yazısında anlatıyoruz.

span.etiket {
  padding: 0.5em 1em;
  border: 1px solid gray;
  /* kenarlık çizilir ama satır aralığı değişmez */
  margin-top: 2em;
  /* yerine konmayan satır içi öğede etkisizdir */
}

span.rozet {
  display: inline-block;
  margin-top: 0.5em;
  /* inline-block olduğunda dikey margin düzeni etkiler */
}

Mantıksal özellikler: margin-inline ve margin-block

margin-top ya da padding-left gibi özellikler fiziksel yönlere bağlıdır. CSS ayrıca yazı yönüne göre çalışan mantıksal karşılıklar da tanımlar: margin-block-start, margin-inline-start, padding-inline gibi. MDN'nin kutu modeli modül sayfasına göre fiziksel özellikler kutu modeli modülünde, akışa göre olanlar ise mantıksal özellikler modülünde tanımlıdır.

Örneğin margin-inline tek değerle hem başlangıç hem bitiş kenarına, iki değerle önce başlangıç sonra bitiş kenarına uygulanır. Soldan sağa yazılan Türkçe bir sayfada başlangıç sol, bitiş sağ kenardır; sağdan sola yazılan bir dilde bu eşleşme kendiliğinden tersine döner. Çok dilli bir site hazırlıyorsanız mantıksal özellikler, her dil için ayrı kural yazma ihtiyacını azaltır.

.makale {
  margin-inline: auto;
  /* satır yönünde iki kenar da auto: yatay yazıda ortalar */
  padding-block: 2rem;
  /* blok yönünde başlangıç ve bitiş: yatay yazıda üst ve alt */
  max-width: 60ch;
}

Kenarlık ile outline arasındaki fark

Kenarlığa çok benzeyen bir özellik daha vardır: outline. MDN iki önemli farkı vurgular. Birincisi, outline hiçbir zaman yer kaplamaz; öğenin içeriğinin dışına çizilir ve kutunun boyutunu ya da komşuların konumunu değiştirmez. İkincisi, belirtim outline'ın dikdörtgen olmasını zorunlu tutmaz, ancak genellikle dikdörtgen çizilir. Bu nedenle odak göstergesi gibi düzeni oynatmaması gereken vurgular için outline uygundur; kutu modeline dahil olan, boyutu etkileyen bir çerçeve istiyorsanız border kullanırsınız.

button {
  border: 2px solid navy;
  /* kutunun boyutuna dahildir */
  outline: 3px solid orange;
  outline-offset: 4px;
  /* yer kaplamaz, komşuları itmez */
}

Köşe yuvarlatma ve gölge gibi kenarlık süslemeleri border-radius ve box-shadow yazısında anlatılıyor. Gölgenin de outline gibi kutunun boyutunu değiştirmediğini, yalnızca görsel olarak dışarı taştığını orada göreceksiniz.

Uygulamalı mini örnek: bir kartın toplam genişliği

Aşağıdaki kartı varsayılan content-box ayarıyla düşünelim ve ekranda yatayda ne kadar yer kapladığını adım adım hesaplayalım.

.urun-karti {
  width: 240px;
  padding: 16px 24px;
  border: 4px solid #333;
  margin: 12px;
}
/* içerik genişliği:   240px
   padding (sol + sağ): 24px + 24px = 48px
   border  (sol + sağ):  4px +  4px =  8px
   border kutusu:      240 + 48 + 8 = 296px
   margin  (sol + sağ): 12px + 12px = 24px
   yatayda kaplanan:   296 + 24 = 320px */

Hesap şöyle işler: width yalnızca içerik alanını belirlediği için 240 piksele iki yandaki padding (48 piksel) ve iki yandaki kenarlık (8 piksel) eklenir; görünen kutu 296 piksel olur. Margin kutunun görünen kısmına dahil değildir ama yer kaplar, bu yüzden kartın yan yana dizildiği bir satırda ayırdığı toplam yatay alan 320 pikseldir. Aynı kartı box-sizing: border-box ile yazsaydınız görünen kutu tam 240 piksel olur, içerik alanı 240 - 48 - 8 = 184 piksele düşerdi. Bu ayrımın neden önemli olduğunu box-sizing yazısında örneklerle anlatıyoruz.

Sık yapılan hatalar

• Stil vermeden kenarlık beklemek: border: 1px red; görünmez, çünkü stil bileşeni none olarak kalır. solid, dashed gibi bir stil ekleyin.
• Üç değerli yazımı yanlış okumak: margin: 0 10px 20px solda da 10 piksel boşluk bırakır, sıfır değil.
• Dikey yüzdenin yüksekliğe göre hesaplandığını sanmak: padding-top ve margin-top yüzdeleri içeren bloğun genişliğinden hesaplanır.
• Negatif padding yazmak: Geçersizdir ve bildirim yok sayılır. Öğeyi yaklaştırmak için negatif margin kullanılır.
• Satır içi öğeye dikey margin vermek: <span> üzerinde üst ve alt margin etkisizdir; önce display değerini değiştirin.
• Beklenmedik dikey boşluk: Alt alta iki blok arasındaki boşluk margin toplamından küçükse büyük ihtimalle margin collapsing yaşanıyordur; ilgili yazıya bakın.

Sık Sorulan Sorular

Margin ile padding arasındaki fark nedir?

Padding öğenin içinde, içerik ile kenarlık arasında boşluk yaratır ve öğenin arka planı bu alana da boyanır. Margin ise öğenin dışında, kenarlık ile komşular arasında boşluk yaratır ve öğenin arka planı bu alana uzanmaz. Ayrıca margin negatif ve auto olabilir, padding olamaz.

width neden beklediğimden geniş görünüyor?

Varsayılan box-sizing: content-box ayarında width yalnızca içerik alanını belirler; padding ve kenarlık bunun üzerine eklenir. Toplamın width değerine eşit olmasını istiyorsanız box-sizing: border-box kullanın.

Arka plan neden kenarlığın altında da görünüyor?

Arka plan varsayılan olarak border alanının dış kenarına kadar boyanır. Kenarlık kesik çizgili ya da yarı saydamsa bu fark edilir. background-clip: padding-box ile arka planı padding alanının kenarında durdurabilirsiniz.

margin: auto her zaman ortalar mı?

Hayır. MDN'ye göre auto değerinde boşluğu tarayıcı seçer ve bu "bazı durumlarda" ortalamaya yarar. Tipik durum, genişliği belirlenmiş bir blok öğenin sol ve sağ margin değerlerinin auto olmasıdır. Genişlik verilmemiş bir blok zaten satırın tamamını kapladığı için ortalanacak boşluk kalmaz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · box-sizing ve border-box · Margin collapsing · display değerleri · border-radius ve box-shadow · CSS birimleri