Css Box Sizing Nedir?

Merhaba Arkadaşlar,
Bu makalede 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.

 css-dersleri-box-sizing-kullanimi-1Gö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.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 18 – Float ve Clear Kullanımı

Sonraki : Css Dersleri 20 – Border Radius Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +