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:

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.

Box Model Yapısı

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
  1. Content
  2. Padding
  3. Border
  4. Margin
https://courses.joshwcomeau.com/
  • 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.

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.
.card{
font-family:sans-serif;
color:#fff;
background-color:orangered;
}

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.
.card{
font-family:sans-serif;
color:#fff;
padding:36px;
background-color:orangered;
}
.card{
font-family:sans-serif;
color:#fff;
padding-top:36px;
padding-left:36px;
padding-bottom:36px;
padding-right:36px;
background-color:orangered;
}
https://courses.joshwcomeau.com/
.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.
.card{
font-family:sans-serif;
color:#fff;
padding:48px 36px 24px;
background-color:orangered;
}
.card{
font-family:sans-serif;
color:#fff;
padding:48px 36px 24px 36px;
background-color:orangered;
}
.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.
.card{
font-family:sans-serif;
color:#fff;
padding:36px 36px 36px 36px;
background-color:orangered;
border:10px solid green;
}

currentColor

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

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

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;
}
.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.

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;
}
.container{
padding:36px;
border:4px solid hotpink;
}
  • 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.

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.

--

--

https://safaelmali.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store