CSS — Box Model Nedir?

Alright Safa, can you explain what is the box model in CSS?

Birçok CSS özelliğine aşina olmama rağmen girdiğim bir Frontend mülakatında bu soru ile karşılaştığımda açıkçası bir cevap veremedim. Bana sordukları soruyu aynı şekilde onlara sormuştum:

Hmm… Box model?? 🙄 🤔

Birkaç ipucu aldıktan sonra içimden “Aaa… Demek buna box model deniyormuşş..” Demiştim. Şimdi gelin beraber box model’in ne olduğuna bakalım. Eminim aranızda bu yazıyı okurken benim gibi tepki verenler olacaktır :)

Box model Nedir?

Sayfalarımızın layout’unu oluştururken, HTML elemanlarından yardım alırız ve bu elemanları kullanarak, oluşturduğumuz sayfalardaki konumlarını belirleriz. İşte bu kullandığımız her bir eleman aslında bir kutunun içerisinde yer almaktadır. Kutu dediğimde aklınıza dikdörtgen şeklinde veya kare şeklinde bir kutu gelebilir.

Bu kutunun içerisinde ne olduğunun hiçbir önemi yoktur. Yani bu bir text olabilir bir buton olabilir hiç farketmeksizin eklediğiniz her bir eleman bir kutunun içerisinde yer alır.

(Örnekleri JSFiddle üzerinden paylaşıyor olacağım. Results kısmından çıktılarına bakabilirsiniz)

Elbetteki bu kutuların her birinin kendine göre CSS özellikleri bulunmaktadır. Bunların detayına şimdilik girmeyeceğiz. Biz şimdilik box model nedir buna bir bakalım.

Box Model Yapısı

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

Box model’i box model yapan 4 ana yön bulunmaktadır:

1. Content
2. Padding
3. Border
4. Margin

Hatta son zamanlarda gördüğüm en güzel tanımlamalardan birisi bana göre Josh Comeau’nun tanımlamasıdır. Josh’un tanımına göre:

Kışın yürüyüş yapan bir insanı düşünün. Üzerinde büyük kabarık bir palto ile yürüyüş yapan bir insanı.

https://courses.joshwcomeau.com/

Bu tanımlamayı biraz açacak olursak eğer:

→ content: kişinin kendisidir. Yani paltonun içerisindeki insan.

→ padding: Paltonun içindeki yün olarak düşünebilirsiniz. Ne kadar yün olursa palto o kadar kabarık olur ve kişi bu paltonun içerisinde o kadar yer kaplar.

→ border: Paltonun malzemesidir. Kalınlığı ve rengi vardır ve kişinin dış görünüşünü etkiler.

→ margin: Kişinin kişisel alanıdır. Pandemi ile beraber son yıllarda öğrendiğimiz gibi, başkaları ile aramızda 1.5 — 2 metre mesafe olması iyidir :)

Bunların detaylarına birazdan giriyor olacağız. Öncelikle bunu tarayıcıda nasıl görebileceğimize bir bakalım. Aşağıdaki örneği JSFiddle üzerinde açalım:

Chrome’da, sağ tıklayıp “Inspect” dediğimizde Tarayıcının DevTools’u açılacaktır (Eğer Türkçe kullanıyorsanız “Denetle” diyebilirsiniz)

Buradan sayfadaki her bir elemanı incelemek için kullabileceğimiz panelin sağ üst kısmında bulunana butona tıklayalım.

Bu butona tıkladığımızda artık spesifik olarak sayfadaki bir elemanı seçebiliriz. Seçtiğimiz elemanın box model yapısını bu şekilde inceleyebiliriz.

Listenin üzerinde geldiğimde farklı renklerde kutular olduğunu görebilirsiniz. Bu renkler:

• Mavi olan renk content’i belirtir.
• Turuncu olan renk margin’i belirtir.
• Yeşil olan ise padding değerini belirtir.
• Tam olarak gözükmesede border sarı renk ile belirtilir.

Bunu bir bütün halinde görmek isterseniz. Tarayıcınızın computed panelinden, seçtiğiniz elemanın box model’ına erişebilirsiniz.

Her bir eleman için box model spesifik olarak oluşturulur ve burada gördüğümüz box model bize content, padding, border ve margin değerlerini gösterir.

Content

• Content, box model’da en içerde bulunan alandır. Bu alanda, kutunun içerisine eklediğimiz elemanlar yer alır diyebiliriz. Kelime anlamı itibariyle içerik anlamına da gelmektedir.
• Yukarıdaki örneğimizde liste elemanları bizim content’imizdir.
• Tarayıcın DevToolsunda da incelediğimiz gibi mavi renk ile gösterilendir.

Bir kutu oluşturalım ve bu kutunun içerisine bir text ekleyelim.

.card{
  font-family:sans-serif;
  color:#fff;
  background-color:orangered;
}

Gördüğünüz gibi content kutunun içerisinde direkt olarak olduğu gibi yer almış oldu. Text’in etrafında herhangi bir boşluk vs. bulunmamaktadır.

Padding

• Padding kutunun iç kısmı ile ilgilenir.
• Tarayıcın DevToolsunda da incelediğimiz gibi yeşil renk ile gösterilendir.
• Border ve content arasında yer alır.
• Padding, content için ekstra alan oluşturulmasını sağlar.

Şimdi bir önceki örneğimizde bulunan kutuya, bir de padding değeri ekleyelim ve sonucu görelim.

.card{
  font-family:sans-serif;
  color:#fff;
  padding:36px;
  background-color:orangered;
}

Josh’un tanımını hatırlayacak olursak eğer padding, Paltonun içindeki yünü temsil etmekteydi. Biz bu yün miktarını artırdığımızda content’in alanının genişlediğini de görebiliriz.

Bu değer aslında bir kısaltılmış yazım şeklidir. Burada aslında kartın içinde bulunan content’in, kartın kenarlarından ne kadar uzak olacağını belirtiyoruz. Eğer bunu uzun şekilde yazmak isteseydik şu şekilde yazabilirdik.

.card{
  font-family:sans-serif;
  color:#fff; 
  padding-top:36px;
  padding-left:36px;
  padding-bottom:36px;
  padding-right:36px;
  background-color:orangered;
}

Kısaltılmış şekilde verdiğimiz değerler spesifik bir sırada uygulanır. Bu sıra top-right-bottom-left olaraktır.

Bunu hatırlamanın en iyi yolu bir saati hayal edebilirsiniz. top kısmından başlayarak geri kalan değerleri saat yönünde yerleştiririz.

https://courses.joshwcomeau.com/

Eğer bu kısa yola sadece iki değer atarsanız, bu iki değer ayna görevi görür.

.card{
  font-family:sans-serif;
  color:#fff;
  padding:48px 36px;
  background-color:orangered;
}

• İlk değer dikeydeki padding özelliklerinden sorumlu olur. Yani kısa şekilde top ve bottom padding’e değerler atamış olursunuz.
• İkinci değer yataydaki padding özelliklerinden sorumlu olur. Yani sağ ve sol padding’e değerler atamış olursunuz.

3 değer atarsanız, top-right-bottom değerlerini spesifik olarak belirtmiş olurken sol değer, sağ padding özelliğinin değerini alır.

.card{
  font-family:sans-serif;
  color:#fff;
  padding:48px 36px 24px;
  background-color:orangered;
}

Yani, yukarıdaki yazım şekli ile aşağıdaki yazım şekli arasında bir fark yoktur.

.card{
  font-family:sans-serif;
  color:#fff;
  padding:48px 36px 24px 36px;
  background-color:orangered;
}

Padding’i kısaltılmış şekilde yazma yerine her bir özelliği ayrı ayrı da yazabilirsiniz.

.card{
  font-family:sans-serif;
  color:#fff; 
  padding-top:36px;
  padding-left:48px;
  padding-bottom:24px;
  padding-right:54px;
  background-color:orangered;
}

Border

• Border kutunun kenarlarını tanımlamak için kullanılabilir.
• Box model’da padding’in üstünde bulunur.
• content’i ve padding’i kapsar.

Kısa şekilde yazım şekli:

.card{
  font-family:sans-serif;
  color:#fff;
  padding:36px 36px 36px 36px;
  background-color:orangered;
  border:10px solid green;
}

Bu kısa şekilde tanımlamanın içerisinde bulundurduğu border özellikleri şunlardır: (Bunların detayına girmeyeceğim. Linklerden inceleyebilirsiniz)

→ Border width

→ Border style

→ Border color

currentColor

Eğer bir border rengi belirtmezseniz, elemanın color değeri, default olarak kullanır.

Örneğin aşağıdaki kart tanımlamamızda border’ın değerini belirtmeden tanımlayalım.

.card{
  font-family:sans-serif;
  color: hotpink;
  border: 1px solid;
  box-shadow: 2px 2px 2px;
  padding:36px;
}

Yukaridaki örneğimizde border için ve box-shadow özellikleri için herhangi bir renk değeri belirtmedik. Ama buna rağmen elemanımızın color özelliğinde tanımlanan renk değeri, border ve box-shadow’un rengi için de geçerli olmuştur.

Eğer bu davranışı siz belirtmek isterseniz currentColor keyword’ünü kullanabilirsiniz

currentColor keyword’ü, elemanın color özelliğinin değerini alır.

.card{
  font-family:sans-serif;
  color: hotpink;
  border: 1px solid currentColor;
  box-shadow: 2px 2px 2px currentColor;
  padding:36px;
}

Josh’un kursu ücretli olduğu için erişemeyenleriniz olabilir. İçerisinde bulunan Border Playground isimli projenin bir benzerini kendim oluşturdum. Aşağıdaki linklerden bu projeyi inceleyebilirsiniz.

• GitHub Reposu: https://github.com/SafaElmali/border-playground
• Demosu: https://border-playground.vercel.app/

Son olarak margin’e bakalım.

Margin

• Margin elemanın etrafındaki alanı genişletmek için kullanılır. Bunu Kişisel Alan olarak çevirebiliriz.
• Box model’da en dış kısımda bulunan kısımdır.
• Content’i, border’ı, padding’i kapsar.
• Margin’in yazılış şekli aynı padding olduğu gibidir:

.card{
  font-family:sans-serif;
  color: hotpink;
  border: 1px solid currentColor;
  box-shadow: 2px 2px 2px currentColor;
  padding:36px;
  margin:10px;
}

Her bir kenara spesifik değerler atayabiliriz.

.card{
  font-family:sans-serif;
  color: hotpink;
  border: 1px solid currentColor;
  box-shadow: 2px 2px 2px currentColor;
  padding:36px;
  margin:10px 25px 50px 50px;
}

Negatif Margin Değeri

Padding ve border sadece pozitif (0'da dahil) değerler kabul ederken, margin negatif değerleri de desteklemektedir.

Negatif margin değeri, elemanın parent container’ın dışına çıkmasına sebep olabilir.

Negatif margin değerine sahip olan eleman, içinde bulunduğu container’ın içerisindeki diğer elemanların konumlarını etkileyebilir.

Bir container’ın içerisine 3 tane kutu ekleyelim.

Şimdi ilk kutuya negatif margin değeri verelim.

Gördüğünüz gibi ilk kutu yukarıya doğru çıktığında aynı parent içerisinde bu elemanın yanında bulunan elemanlar, negatif margin değerine sahip olan elemanın pozisyonuna göre konumlanırlar.

Auto Margins

Margin değeri ile, child bir elemanı container içerisinde ortalanmasını sağlayabiliriz.

.container{
  padding:36px;
  border:4px solid hotpink;
  width:500px;
  margin-left:auto;
  margin-right:auto;
}

Block elemanlar default olarak yatayda ne kadar uygun alan olursa otomatik olarak o kadar genişlerler.

.container{
  padding:36px;
  border:4px solid hotpink;
}

Gördüğünüz gibi eklediğimiz div bir block elemandır. Herhangi bir width değeri belirtmemize rağmen bulunduğu alan içerisindeki uygun alan kadar genişlemiştir.

• Bu div’i ortalayabilmemiz için öncelikle width değerini spesifik olarak belirtmemiz gerekmektedir.
• Daha sonra margin-left ve margin-right özelliklerine auto değerini verelim.

Baktığımız zaman, tarayıcının her iki taraftanda da elemana aynı değerde margin değeri uyguladığını görebiliriz.

auto değerinin anlamı, uygun olan maksimum alanın margin değeri ile doldurulmasıdır.

margin-left ve margin-right değerlerine auto değerini atadığımızda, bu özelliklerin mümkün olan alanı kaplamarını söylemiş oluruz. Böylelikle hem sağdan hem de sol taraftan eşit derece de margin değeri uygulanarak, elemanın ortalanması sağlanır.

Bilinmesi Gerekenler

• Bu sadece yataydaki margin değerleri için geçerlidir.
• Bu sadece explicit dediğimiz yani bizim belirttiğimiz width değerleri için geçerlidir.

Veee bir yazının daha sonuna gelmiş bulunuyoruz 🥳

Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim :)

İletişim kanalları: Twitter — LinkedIn — Mail

Bir sonraki yazıda görüşmek üzere!