CSS Bir Elemanın Genişliği ve Yüksekliği

Bir elemanın genişlik ve yüksekliğinin bütün tarayıcılarda doğru çalışmasını garantilemek için kutu modelinin nasıl çalıştığını bilmek gerekir. Bunun için aşağıdaki örnek üzerinden bir hesaplama yapalım:

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    padding: 0;
}

Burada biraz uzun bir toplama işlemi gerekecek:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right padding)
= 350px

 

Genişlik hesaplama

Bir elemanın genişliği şu şekilde hesaplanmalıdır:

Toplam eleman genişliği = Genişlik+Sol boşluk+sağ boşluk+sol sınır+sağ sınır+sol marjin+sağ marjin

 

Toplam yükseklik hesaplama

Toplam yükseklik aşağıdaki gibi hesaplanmalıdır:

Toplam eleman yüksekliği = Yükseklik+Üst boşluk+alt boşluk+üst sınır+alt sınır+üst marjin+alt marjin