CSS Kutu Modeli (Box Model)
Bu yazımızda, web sayfalarındaki HTML öğelerinin boyutlandırılması, kenar boşlukları ve sınırları gibi fiziksel özelliklerini düzenleyen CSS kutu modelini tüm detaylarıyla ele alacağız. Kutu modeli, bir öğenin içerik alanı, dolgusu (padding), kenarlıkları (border) ve dış boşlukları (margin) ile nasıl etkileşim içinde olduğunu anlamanızı sağlar. CSS’in temel yapı taşlarından biri olan bu konsept, sayfa düzenini kontrol etmek için kritik bir öneme sahiptir.
CSS Kutu Modeli
CSS kutu modeli, bir HTML elemeneti içeriğinin boyutları (genişlik ve yükseklik) ile birlikte öğenin padding, border ve margin gibi bileşenlerini kapsar. Aşağıdaki resimde ilgili ayrıntılar net bir şekilde görülebilmektedir:

Yukarıdaki resim, bütün HTML elementinin aslında kutusal bir yapı ifade ettiğini anlatır. Bu prensip ile ilgili HTML elementlerinin sayfa içinde nasıl konumlandırılacağı da belirlenmiş olur. CSS kutu modelini oluşturan kavramları tanıtalım:
- width (Genişlik): İçerik alanının genişliğini belirler.
- height (Yükseklik): İçerik alanının yüksekliğini belirler.
- padding (Dolgu): İçerik alanı ile border (sınır) arasında kalan boşluk miktarını belirler.
- border (Sınır): İçerik alanını ve padding’i çevreleyen sınırı belirler. Bir nevi hücre çeperi gibidir.
- margin (Dış boşluk): Sınır çizgisinin, yani border’ın dış kenarı ile HTML elemanının dış kenarı arasındaki boşluk miktarını belirler.
Yukarıdaki resimden de anlaşılacağı üzere CSS kutu modeli, bir elementin nihai boyutunu hesaplarken dikkate alınması gereken özellikleri içermektedir. Bu modelde, genişlik ve yükseklik doğrudan içerik alanını belirtir. Ancak bir elementin sayfa üzerindeki gerçek boyutunu anlamak için padding ve border değerlerini de hesaba katmamız gerekir. Margin değeri ise elementin dışındaki boşluğu belirtir ve bu değer, genellikle bir elementin toplam boyutuna doğrudan dahil edilmez.
Yani iş bir elementin toplam boyutunu hesaplamaya döndüğünde şu şekilde bir hesaplama yaparız:
➡️ Toplam Genişlik = width + sol padding + sağ padding + sol border + sağ border
➡️ Toplam Yükseklik = height + üst padding + alt padding + üst border + alt border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kutu Örneği</title>
<style>
.kutu {
width: 100px;
height: 100px;
padding: 10px; /* Üst, alt, sol ve sağ için 10px */
border: 5px solid black; /* Üst, alt, sol ve sağ için 5px kalınlığında siyah sınır */
margin: 15px; /* Üst, alt, sol ve sağ için 15px dış boşluk */
background-color: lightgray; /* İçerik alanının rengini aydınlık gri yap */
}
</style>
</head>
<body>
<div class="kutu">
Bu bir kutudur.
</div>
</body>
</html>
Yukarıdaki CSS kodunda verilen ölçülere göre kutumuzun toplam yüksekliğini ve toplam genişliğini hesaplayalım:
- Genişlik (width): 100px
- Yükseklik (height): 100px
- Padding: Üst = 10px, Alt = 10px, Sol = 10px, Sağ = 10px
- Border: Üst = 5px, Alt = 5px, Sol = 5px, Sağ = 5px
- Toplam Genişlik = width (100px) + sol padding (10px) + sağ padding (10px) + sol border (5px) + sağ border (5px) ➡️ 130px
- Toplam Yükseklik = height (100px) + üst padding (10px) + alt padding (10px) + üst border (5px) + alt border (5px) ➡️ 130px
Farkedileceği üzere yukarıdaki gibi bir hesaplama, bir kutunun boyutunu doğru bir şekilde belirlemeyi zorlaştırır. Bu da zamanla bir web sayfasının tüm içeriğinin konumlandırılmasını ve yönetilmesini zorlaştırmaktadır. Bunu yönetebilmek için box-sizing
özelliğini kullanıyoruz. Bu özellik şu iki değere sahiptir:
- content-box
- border-box
Box Model: "content-box"
Bu varsayılan kutu modeli değeridir. Bu modelde, belirttiğiniz genişlik ve yükseklik değerleri sadece içerik kısmını belirtir. Yani, “padding” ve “border” değerleri genişlik ve yükseklik değerlerine eklenir.
.content-box {
box-sizing: content-box;
width: 300px;
height: 200px;
padding: 10px;
border: 5px solid black;
background-color: #f4f4f4;
}
Bu örnekte, elementin toplam genişliği şu şekilde olacaktır:
- Toplam genişlik: 300px (width) + 20px (padding) + 10px (border) = 330px
- Toplam yükseklik: 200px (height) + 20px (padding) + 10px (border) = 230px
Gördüğünüz üzere, bir elimiz tabiri caizse hesap makinesinde olacaktır. Bu da ister istemez hata yapmamız kaçınılmaz kılacaktır.
Box Model: "border-box"
Bu şekilde bir kullanımda, belirttiğimiz genişlik ve yükseklik değerlerinin hesaplanmasında kutu modelimiz; içeriği, padding’i ve border’ı kapsar. Bu da haliyle verdiğimiz ölçülerin tahmin edebilmesini ve beklenen şekilde çalışmasını sağlar.
.border-box {
box-sizing: border-box;
width: 300px;
height: 200px;
padding: 10px;
border: 5px solid black;
background-color: #e8e8e8;
}
Bu örnekte, elementin toplam genişliği ve yüksekliği belirtildiği gibi sırasıyla 300px ve 200px olacaktır. padding ve border değerleri bu boyutlar içerisinde kalacaktır.
CSS’te border-box
özelliği modern web tasarımında daha yaygın olarak kullanılır. Hatta “evrensel seçici” (*
) kullanarak stillemeye ilk önce bunu yazarak başlarız:
* {
box-sizing: border-box;
}
Bu kod, sayfadaki tüm HTML elementlerinin kutu modelinin border-box
olarak ayarlanmasını sağlar. Tekrar belirtmek isterim ki bu, tasarımcıların ve geliştiricilerin web sayfasındaki tüm elementler için öngörülebilir bir boyutlama ve konumlandırma sistemi kullanmasını kolaylaştırdığı için ilk yapılan işlemlerdendir. Hatta ve hatta varsayılan padding ve margin değerlerini de sıfırlamak gerekir. Bakınız:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
CSS Elementlerinin Kutu Tipleri
CSS’te bir elementin görünümünü ve davranışını belirleyen “kutu” kavramı, web tasarımının temel yapı taşlarından biridir. Elementlerin sahip olduğu kutu tipleri, bir sayfadaki yerleşimlerini ve diğer elementlerle etkileşimlerini doğrudan etkiler. Maddeler halinde şu şekilde özetleyebilirim bu kavramı:
- Block-Level Elements (Blok Düzeyinde Elementler):
- Sayfada kendi başına yeni bir satır oluşturur.
- Varsayılan olarak, genişliği içinde bulunduğu konteynerin tam genişliğini kaplar.
- Genişlik ve yükseklik değerleri atanabilir.
- Örnekler:
<div>
<h1>
–<h6>
<p>
<ul>
ve<ol>
- Inline Elements (Satır İçi Elementler):
- Mevcut satırın akışında görüntülenir.
- Sadece içeriklerinin kapladığı kadar yer kaplar.
- Genişlik ve yükseklik değerleri etkisizdir.
- Örnekler:
<span>
<a>
<strong>
<img>
(bazı durumlarda)
- Inline-Block Elements (Satır İçi-Blok Elementler):
- Inline elementler gibi bir satırın akışında yer alır.
- Blok elementler gibi genişlik ve yükseklik değerleri atanabilir.
- Hem inline hem de block elementlerin avantajlarını bir araya getirir.
- Flex Elements (Esnek Elemanlar):
display: flex
ile etkinleştirilir.- Esnek düzen sunarak yatay ve dikey hizalama kolaylığı sağlar.
- İçerikler arasındaki alanların eşit veya belirli bir oranla paylaşılmasını sağlar.
- Kullanım Alanları:
- Karmaşık düzenler
- Merkezleme
- Eşit hizalama
- Grid Elements (Izgara Elemanları):
display: grid
ile etkinleştirilir.- İki boyutlu bir düzen sağlar: yatay (satır) ve dikey (sütun).
- Karmaşık ızgara tabanlı düzenler oluşturmak için uygundur.
- Kullanım Alanları:
- Izgara tabanlı tasarımlar
- Eksenel hizalama
- Box Model Özellikleri:
- Content (İçerik): Elementin gerçek içeriği.
- Padding (Dolgu): İçerik ile çerçeve arasındaki boşluk.
- Border (Çerçeve): Elementin etrafındaki kenarlık.
- Margin (Kenar Boşluğu): Elementin dışındaki alan, diğer elementlerden olan boşluk.