Turkcell | Geleceği Yazanlar

201: HTML5 & CSS Başlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

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

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : css-model kutu-model margin border padding content height width genislik web-programlama

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