Genişlik (width) ve yükseklik(height) değerlerinin kullanımı oldukça basit görünse de, tarayıcılar bir öğenin sahip olduğu gerçek (actual) yükseklik ve genişlik değerini bir takım hesaplamalar sonucu ortaya çıkarır ve çizimleri buna göre gerçekleştirir. Bunun anlamı bizim vermiş olduğumuz genişlik ve yükseklik ile tarayıcının bunu yorumlaması arasında bir takım farklılıkların var olduğudur. Şimdi isterseniz bu durumu basit bir örnek ile inceleyelim;
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> .kutu1 { width: 300px; height: 100px; border: 1px solid blue; } .kutu2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; } </style> </head> <body> <div class="kutu1">Genişliği 300px, yüksekliği 100px bir kutu</div> <br> <div class="kutu2">Genişliği 300px, yüksekliği 100px bir kutu</div> </body> </html> |
Yukarıdaki stillere bir göz atacak olursanız iki farklı kutu ve her iki kutuda aynı yükseklik ve genişlik değerlerine sahip. Uygulamayı bir tarayıcı ile test ettiğinizde;
Çıkan sonuç, her iki kutunun farklı boyutlarda çizilmektedir. Sebebini ikinci kutunun sahip olduğu padding (iç boşluk) olduğunu düşünebilirsiniz. Bu doğru bir neden olsa da, asıl soru stil bildirimlerinde yer alan width ve height bildirimleri ne işe yarıyor?
Konuya iyi bir giriş yapmak için CSS Kutu Modeli başlıklı yazımızı öncelikli olarak okumanızı öneriyoruz. Biraz hatırlayalım;
Varsayılan olarak, bir öğenin genişliği ve yüksekliği şu şekilde hesaplanır:
genişlik + iç boşluk + kenarlık = bir öğenin gerçek genişliği
yükseklik + iç boşluk + kenarlık = bir öğenin gerçek yüksekliği
Bu şu anlama gelir: Bir öğenin genişliğini / yüksekliğini ayarladığınızda, öğe sıklıkla belirlediğinizden daha büyük görünür (öğenin kenarlık ve iç boşluk unsurunun öğenin belirtilen genişlik / yüksekliğe eklendiğinden).
Dolayısıyla, web geliştiricileri, öğelerin sınırlarını oluşturabilmek için, istedikleri biçimden daha küçük bir genişlik / yükseklik değeri belirttiler.
CSS3 ile birlikte gelen box-sizing Özelliği bu sorunu çözer.
box-sizing Özelliği Kullanımı
CSS3 box-sizing özelliği, iç boşluk ve kenarlığı bir öğenin toplam genişliğiyle eşit olarak çizilmesini sağlar. Kısaca iç boşluk ve kenarlık her ne olursa olsun genişlik (width) ve yükseklik (height) değerlerini esas alır. Bunun için yapmanız gereken tek şey HTML öğesinin stilinde box-sizing özelliğine border-box değerini vermek olmalıdır.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <style> .kutu1 { box-sizing: border-box; width: 300px; height: 100px; border: 1px solid blue; } .kutu2 { box-sizing: border-box; width: 300px; height: 100px; padding: 50px; border: 1px solid red; } </style> </head> <body> <div class="kutu1">Genişliği 300px, yüksekliği 100px bir kutu</div> <br> <div class="kutu2">Genişliği 300px, yüksekliği 100px bir kutu</div> </body> </html> |
Sonuç, eğer bir öğeye genişlik ve yükseklik verdiyseniz tarayıcı bunu yerine getirmelidir.
[…] […]