Bu yazımızda Css’te Box Sizing nedir?, Neden kullanırız? onu öğreneceğiz. Bir html etiketinin sayfada kapladığı alan sadece o etiketin genişlik değeri değildir. Bu alanı hesaplamak için genişlik değeri ile padding ve border değerlerinin toplamı alınır.
Örneğin 2 adet div etiketi oluşturalım ve bunlara aynı genişlik değerini verelim.
Fakat padding ve border değerlerini farklı verip tarayıcıdaki durumlarını inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style> #box1, #box2 { margin: 10px; width: 240px; } #box1{ border:5px solid black; padding:50px; } #box2{ border:8px solid black; padding:20px; } </style> <div id="box1">Birinci Div Etiketi</div> <div id="box2">İkinci Div Etiketi</div> |
Gördüğünüz gibi genişlik değerleri aynı olmasına rağmen sayfada kapladıkları alanlar farklı oldu.
Bu gibi durumlarda sayfa düzenini oluşturuken bazı zorluklar yaşayabiliriz. Eğer bir etiketin sayfada kaplayacağı alan verdiğimiz genişlik değeri olsun istiyorsak, işte burda box-sizing özelliği devreye giriyor.
Bir etikete box-sizing : border-box; özelliğini verdiğimiz taktirde sayfada kaplayacağı alan genişliği kadar olacaktır. Yani border ve padding değerleri etiketin kapladığı alanı değiştirmeyecektir.
Şimdi biraz önce yaptığımız örneği aynı değerleri kullanarak, box-sizing ile uygulayıp tarayıcıdaki durumunu inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> #box1, #box2 { margin: 10px; width: 240px; box-sizing: border-box; } #box1{ border:5px solid black; padding:50px; } #box2{ border:8px solid black; padding:20px; } </style> <div id="box1">Birinci Div Etiketi</div> <div id="box2">İkinci Div Etiketi</div> |
Gördüğünüz gibi kapladıkları alan 240px genişliğinde olmuş oldu.
Yani padding ve border değerleri, etiketin kapladığı alanı değiştirmedi.
Eğer box-sizing özelliğini kullanmak isterseniz, sayfayı tasarlamaya başlamadan önce tüm etiketlere tek seferde uygulamak için şu şekilde yazmanız daha avantajlı olacaktır.
|
1 2 3 4 5 6 7 |
<style> *{ box-sizing: border-box; } </style> |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
