CSS Bir Elemanın Genişliği ve Yüksekliği
Lisans:
Creative Commons
11.12.2020
tarihinde güncellendi
Bakabileceğiniz Etiketler:
Eğitmen:
Geleceği Yazanlar Ekibi
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
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 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