ETİKETLER
width
Boyut Özellikleri
CSS boyut özelliklerini belirlerken aşağıdaki tabloda yer alan değerleri kullanabilirsiniz:
| Özellik | Anlamı | Değerleri |
| height | Bir elemanın yüksekliğini atar. | auto length % inherit |
| max-height | Bir elemanın en büyük yükseklik değerini atar. |
none length % |
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
CSS Kutu Modeli
Tüm CSS elemanları birer kutu olarak düşünülebilir. CSS'te tasarım ve düzenden bahsediliyorsa, "Kutu Modeli" terimi kullanılır. CSS Kutu Modeli esasında HTML bileşenlerinin etrafını saran ve margin (kenar mesafesi), border (sınır), padding (boşluk) ve content (içerikten) oluşan elemanlardan ibarettir.
CSS Kutu Modeli, bize elemanların etrafına bir sınır ekleme (border) ya da elemanlar arasında bir boşluk (padding) tanımlama olanağı sağlar.
Aşağıdaki şema, CSS Kutu Modeli elemanlarını daha iyi kavramanıza yardımcı olacaktır: