CSS Kutu Modeli

CSS Kutu Modeli (Box Model)

Css kutu modelinde tüm HTML elementleri bir kutu olarak düşünülür.

Kutu modeli, web sayfası tasarımında ve yerleşimde kullanılan bir ifadedir.

Kutu denen yapı margin, padding,border ve içerikten oluşan yapıdır.

Aşağıdaki resim kutu modelini tasvir etmektedir:

Bu resimde;

• İçerik (content) - Kutunun içeriği: metin, resim, video gibi
• Padding - İçerik ile border arasındaki boşluk
• Border - padding değerinden sonra gelen sınır çizgisi
• Margin - Border dışında kalan boşluk. Genelde diğer HTML elementlerinin birbirine olan yakınlıkları margin ile  ayarlanır.

Kutu modeli HTML elementlerini sayfa içinde nasıl konumlandırılacağı ile ilgili temel bilgiler verir.

div {
    background-color: #2196F3;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

Bir HTML Elementinin Genişlik ve Yüksekliği

Bir tarayıcıda HTML elementinin genişlik ve yüksekliğinin nasıl hesaplandığını anlayabilmek için kutu modelinin nasıl çalıştığını iyi anlamalısınız.

Web sayfamıza, toplam genişliği 400px olacak bir <div> elementi eklemek istediğimizi düşünelim:

div {
    width: 350px;
    padding: 15px;
    border: 10px solid gray;
    margin: 0;
}

Peki toplam genişlik nasıl hesaplandı? İşte hesabı:

Bir elementin toplam genişliği şu şekilde hesaplanır:

Toplam Genişlik = width(genişlik) + sağ border + sol border + sağ padding + sol padding + sağ margin + sol margin 

Bir elementin toplam yüksekliği şu şekilde hesaplanır:

Toplam Yükseklik = height(yükseklik) + üst border + alt border + üst padding + alt padding + üst margin + alt  margin