Ribiru ailemize yeni yazar arkadaşlar arıyoruz! Aramıza katılmak isterseniz buraya tıklayın!

8- HTML – CSS Kavramları ve Temelleri İçin Bir Kılavuz: Kutu Modeli

Kutu boyutu! (Box-sizing) Bunun bir anlamı var: margin(kenarlık) ve padding(dolgu) öğenin boyutunun bir parçası olarak sayılır mı, sayılmaz mı?

Kenarlık kutusu (Border box) Kenarlık ve dolgu, bir öğenin boyutunun parçasıdır!
İçerik kutusu (Content box) Kenarlık ve dolgu, bir öğenin boyutunun parçası değildir!

Benim tavsiyem? Her şeyde kutu boyutlandırmayı kenarlık kutusu olarak ayarlayın. Nadir durumlarda, bir şeyin içerik kutusu olması gerektiğinde, onu geçersiz kılabilirsiniz. Bu, IE’nin doğru yaptığı birkaç şeyden biridir. Tarayıcıların geri kalanı varsayılan olarak içerik kutusunu kullanırken kenarlık kutusunu varsayılan yapmak.

Border box vs. content box?

Content-box uygulandığında, öğenin toplam boyutu 72 piksel * 72 pikseldir:

Content-Box

içerik için 50 piksel
Dört 1 piksel kenarlık için 2 piksel (x) ve 2 piksel (y)
Her tarafta 10 piksel dolgu için 20 piksel
= 72 piksel kare

Border-box uygulandığında, elemanın toplam boyutu 50px * 50px’dir.

Border box

içerik için 28 piksel
Dört 1 piksel kenarlık için 2 piksel (x) ve 2 piksel (y)
Her tarafta 10 piksel dolgu için 20 piksel
= 50 piksel kare

Bir öğeye her biri 50 piksellik bir yükseklik ve genişlik veriyorsanız, öğenin 50 piksel mi yoksa 72 piksel mi olmasını tercih edersiniz? En olası cevap, yükseklik ve genişliğin öğenin boyutuyla eşleşmesini istemenizdir. Bu, özellikle yüzde olarak ayarlanan esnek/ızgaralar olmak üzere mizanpajlar oluştururken çok önemli hale gelecektir.

Bunun gibi tüm öğelere border-box uygulayabilirsiniz:

* {
  box-sizing: border-box;
}

Zeen is a next generation WordPress theme. It’s powerful, beautifully designed and comes with everything you need to engage your visitors and increase conversions.