Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 201 Ders Programı

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

 

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