Kutu Modeli

CSS Podcast'i - 001: Kutu Modeli

Şu HTML kodunuz olduğunu varsayalım:

<p>I am a paragraph of text that has a few words in it.</p>

Ardından, bu öğe için şu CSS'yi yazarsınız:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

İçerik, belirttiğiniz 100 piksel yerine 142 piksel genişliğinde oluyor ve öğenizin dışına çıkıyor. Bunun nedeni nedir?

Kutu modeli, CSS'nin temelini oluşturur. Kutu modelinin nasıl çalıştığını, CSS'nin diğer yönlerinden nasıl etkilendiğini ve en önemlisi, nasıl kontrol edebileceğinizi anlamak daha öngörülebilir CSS yazmanıza yardımcı olabilir.

CSS'nin kutu modelini anlamak, içeriğinizin neden bir öğeye sığmadığını anlamanıza yardımcı olur.

CSS tarafından görüntülenen her şeyin bir kutu olduğunu unutmamak önemlidir. Bu, yalnızca bir metin olsa veya border-radius karakteriyle daire gibi görünse bile geçerlidir.

İçerik ve boyutlandırma

Kutular, display değerlerine, ayarlanan boyutlarına ve içeriklerine bağlı olarak farklı davranışlar gösterir. Bu içerik düz metin veya alt öğeler tarafından oluşturulan daha fazla kutu olabilir. Her iki durumda da içerik, kutunun boyutunu varsayılan olarak etkiler.

Bunu harici boyutlandırma ile kontrol edebilir veya tarayıcının içerik boyutuna göre sizin için karar vermesine izin vermek üzere dahili boyutlandırma kullanabilirsiniz.

Farkı açıklayan temel bir demo aşağıda verilmiştir:

Kutu harici boyutlandırmaya sahip olduğunda, kutudan taşmadan önce ekleyebileceğiniz içerik miktarı sınırlıdır. Bu, "awesome" kelimesinin taşmasına neden olur.

Demoda, sabit boyutlu ve kalın kenarlıklı bir kutuda "CSS is awesome" (CSS harika) ifadesi yer alıyor. Kutunun belirli bir genişliği olduğundan, kutu dışsal olarak boyutlandırılmıştır. Bu, alt içeriğinin boyutunu kontrol ettiği anlamına gelir. Ancak "awesome" kelimesi kutu için çok büyük olduğundan üst kutunun sınır kutusunun dışına taşar (bu konuyla ilgili daha fazla bilgiyi sonraki bölümlerde bulabilirsiniz). Bu taşmayı önlemenin bir yolu, kutunun genişliğini ayarlamamak veya bu örnekte width değerini min-content olarak ayarlamak suretiyle kutunun boyutunu doğal olarak belirlemektir. min-content anahtar kelimesi, kutuya yalnızca içeriğinin (ör. "harika" kelimesi) doğal minimum genişliği kadar geniş olmasını söyler. Bu sayede kutu, metnin etrafına tam olarak oturur.

Farklı boyutlandırmanın gerçek içerik üzerindeki etkisini gösteren daha karmaşık bir örneği aşağıda bulabilirsiniz:

Harici boyutlandırma, bir öğenin boyutunu kontrol etmenizi sağlar. İçerik boyutlandırma, metnin taşmasını önler.

Harici boyutlandırmanın size daha fazla kontrol sağladığını ve dahili boyutlandırmanın içeriğe daha fazla kontrol sağladığını görmek için dahili boyutlandırmayı açıp kapatın. Efektleri görmek için karta birkaç cümlelik metin ekleyin. Bu öğe harici boyutlandırmaya sahip olduğunda, taşma olmadan önce ekleyebileceğiniz içerik miktarı sınırlıdır. Ancak dahili boyutlandırma etkinleştirildiğinde bu durum söz konusu olmaz.

Bu öğe, varsayılan olarak her biri 400px olan bir width ve height değerine sahiptir. Bu boyutlar, öğenin içindeki her şey için katı sınırlar belirler. İçerik kutuya sığamayacak kadar büyük olmadığı sürece bu sınırlar geçerlidir. Çiçek resminin altındaki başlığı kutunun yüksekliğini aşan bir metinle değiştirerek bu özelliği kullanabilirsiniz.

Önemli terim: Taşma, içeriğin bulunduğu kutu için çok büyük olması durumunda gerçekleşir. overflow özelliğini kullanarak bir öğenin taşan içeriği nasıl işleyeceğini yönetebilirsiniz.

İçsel boyutlandırmaya geçiş yaptığınızda tarayıcı, kutunun içerik boyutuna göre sizin için kararlar verebilir. Kutu, içeriğine göre yeniden boyutlandırıldığından taşma olasılığı çok daha düşüktür.

İçsel boyutlandırmanın tarayıcının varsayılan davranışı olduğunu ve genellikle dışsal boyutlandırmaya kıyasla çok daha fazla esneklik sağladığını unutmamak önemlidir.

Kutu modelinin alanları

Kutular, belirli bir işi yapan farklı kutu modeli alanlarından oluşur.

Kutu modelinin dört ana alanını (içerik kutusu, dolgu kutusu, kenarlık kutusu ve kenar boşluğu kutusu) gösteren bir şema
Kutu modelinin dört ana alanı: içerik kutusu, dolgu kutusu, kenarlık kutusu ve kenar boşluğu kutusu.

İçerik kutusu, içeriğin bulunduğu alandır. İçerik, üst öğesinin boyutunu kontrol edebilir. Bu nedenle, genellikle en değişken boyutlu alan burasıdır.

Doldurma kutusu, içerik kutusunu çevreler ve padding özelliği tarafından oluşturulan alandır. Doldurma kutunun içinde olduğundan, kutunun arka planı oluşturduğu alanda görünür. Kutuda overflow: auto veya overflow: scroll gibi taşma kuralları ayarlanmışsa kaydırma çubukları da bu alanı kaplar.

Kaydırma çubukları dolgu kutusunda bulunur.

Kenarlık kutusu, dolgu kutusunu çevreler ve alanı, öğe için görsel bir çerçeve oluşturan border değeriyle tanımlanır. Öğenin kenar sınırı, görebileceğiniz alanı belirler.

Son alan olan kenar boşluğu kutusu, kutunuzun etrafındaki boşluktur ve kutunun margin kuralıyla tanımlanır. outline ve box-shadow gibi özellikler de öğenin üzerine boyandıkları ve kutunun boyutunu etkilemedikleri için bu alanı kaplar. Bir kutudaki outline-width 200px değerini değiştirmek, kenarlık içinde hiçbir şeyi değiştirmez.

Geniş bir ana hat, öğenin geri kalanının boyutunu etkilemez.

Faydalı bir benzetme

Kutu modelini anlamak karmaşık bir süreçtir. Bu nedenle, şu ana kadar öğrendiklerinizi anlamanıza yardımcı olacak bir benzetme aşağıda verilmiştir.

Üç resim çerçevesi.
Kutu modeli, fiziksel resim çerçeveleri kullanılarak gösterilmiştir.

Bu diyagramda, bir duvara yan yana monte edilmiş üç resim çerçevesi var. Çerçeveli resmin öğeleri, kutu modeline aşağıdaki şekilde karşılık gelir:

  • İçerik kutusu, resimdir.
  • Dolgu kutusu, çerçeve ile sanat eseri arasında kalan beyaz montaj kartıdır.
  • Sınır kutusu, resim için gerçek bir sınır sağlayan çerçevedir.
  • Kenar boşluğu kutusu, kareler arasındaki boşluktur.
  • Gölge, kenar boşluğu kutusuyla aynı alanı kaplar.

Kutu modelinde hata ayıklama

Tarayıcı geliştirici araçları, seçilen bir kutunun kutu modeli hesaplamalarının görselleştirilmesini sağlar. Bu sayede kutu modelinin nasıl çalıştığını ve üzerinde çalıştığınız web sitesini nasıl etkilediğini anlayabilirsiniz.

Bu özelliği Chrome'da denemek için:

  1. Geliştirici Araçları'nı açın.
  2. Bir öğe seçin.
  3. Kutu modeli hata ayıklayıcısını gösterir.
Soutline demosu için kutu modeli hata ayıklayıcısı.

Kutu modelini kontrol etme

Kutu modelini nasıl kontrol edeceğinizi anlamak için öncelikle tarayıcınızda neler olduğunu anlamanız gerekir.

Her tarayıcı, HTML dokümanlarına bir kullanıcı aracısı stil sayfası uygular. Stil sayfası, öğelere tanımlanmış CSS verilmemişse öğelerin nasıl görünmesi ve davranması gerektiğini tanımlar. Kullanıcı aracısı stil sayfalarındaki CSS, tarayıcıya göre değişir ancak her tarayıcının, içeriğin okunmasını kolaylaştıran varsayılan ayarları vardır.

Kullanıcı aracısı stil sayfası, display alanını kullanan öğeler için varsayılan değeri ayarlar. Örneğin, bir <div> öğesinin varsayılan display değeri block, bir <li> öğesinin varsayılan display değeri list-item ve bir <span> öğesinin varsayılan display değeri inline'dir.

Bir inline öğesinin blok kenar boşluğu var ancak diğer öğeler buna uymuyor. inline-block ile diğer öğeler blok kenar boşluğuna uyar ancak ilk öğe, inline öğesi olarak sahip olduğu davranışların çoğunu korur. Bir block öğesi, varsayılan olarak kullanılabilir satır içi alanı doldurur. inline ve inline-block öğeleri ise yalnızca içerikleri kadar büyüktür.

Kullanıcı aracısı stil sayfası, box-sizing için de varsayılan değerler belirler. Bu, bir kutuya boyutunu nasıl hesaplayacağını söyler. Varsayılan olarak tüm öğeler box-sizing: content-box; olarak ayarlanır. Bu, width ve height gibi boyutları ayarladığınızda bu boyutların içerik kutusu için geçerli olduğu anlamına gelir. Ardından padding ve border değerlerini ayarlarsanız bu değerler içerik kutusunun boyutuna eklenir.

Anlayıp anlamadığınızı kontrol etme

Kutu modeli boyutunu etkileyen özelliklerle ilgili bilginizi test edin.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

Sizce .my-box ne kadar geniş olacak?

200 piksel
Kutu boyutlandırma için varsayılan değer content-box olduğundan, dolgu ve kenarlıklar genişliğe eklenir. Kutuda box-sizing: border-box varsa 200px doğru olur.
260 piksel
Varsayılan kutu boyutu, içerik kutusudur. Bu, dolgu ve kenarlıkların genel kutuya eklendiği anlamına gelir.

Bu kutunun gerçek genişliği 260 pikseldir. CSS varsayılan box-sizing: content-box değerini kullandığından uygulanan genişlik, içeriğin genişliğidir ve her iki taraftaki padding ile border bu genişliğe eklenir. İçerik için 200 piksel + 40 piksel dolgu + 20 piksel kenarlık, toplamda 260 piksel görünür genişlik oluşturur.

border-box boyutunu belirterek bunu değiştirebilirsiniz:

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

Bu alternatif kutu modeli, CSS'ye width değerini içerik kutusu yerine kenarlık kutusuna uygulaması talimatını verir. Bu durumda border ve padding değerleri itilir. Dolayısıyla .my-box değerini 200px genişliğinde ayarladığınızda aslında 200px genişliğinde oluşturulur.

Bu özelliğin nasıl çalıştığını görmek için aşağıdaki etkileşimli demoya göz atın. box-sizing değerini açtığınızda mavi alan, kutunun içinde hangi CSS'nin uygulandığını gösterir.

content-box ve border-box boyutlandırmanın etkilerini karşılaştırın.
*,
*::before,
*::after {
  box-sizing: border-box;
}

Bu CSS kuralı, dokümandaki her öğeyi ve her ::before ile ::after sözde öğesini seçip box-sizing: border-box uygular. Bu nedenle, artık her öğe bu alternatif kutu modelini kullanır.

Alternatif kutu modeli daha tahmin edilebilir olduğundan geliştiriciler genellikle bu kuralı sıfırlama ve normalleştirme işlemlerine ekler. Örneğin bu kural.

Kaynaklar

Kullanıcı aracısı stil sayfaları