Css Box Sizing Nedir?

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.

Fakat padding ve border değerlerini farklı verip tarayıcıdaki durumlarını inceleyelim.

 css-dersleri-box-sizing-kullanimi-1

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.

css-dersleri-box-sizing-kullanimi-2

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.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın