Css ile padding ve width 100% verirken taşma sorunun çözümü

04 Şubat 2015

Merhabalar arkadaşlar,

Genelde karşımıza çıkmaz ama bir sorunun çözümünü size aktarmak istedim. Responsive temalarda CSS yazarken genelde boyutlandırma uyumlu olması açısından

 float:left; width:100%; 

yukarıdaki gibi CSS komutları verilir ve bu içinde bulunduğu divin veya en dış kısımdaysa tarayıcının genişliği kadar boyut alır ve tarayıcı küçülse bile aynı boyutta kalır.

Fakat şöyle bir durum söz konusu olabiliyor. Bu divin içerisine başka bir div daha koydunuz da ve ona da aynı CSS komutunu ve ayrı yeten ek olarak padding komutu verilirse iş biraz karışıyor.

 float:left; width:100%; padding:20px; 

Yukarıdaki CSS komutları bir hangi divin içindeyse o divin boyutunu ayrı yeten her kısımdan 20px de ek olarak büyümesini belirtiyor bu da o divin genişliği + (20 (sol kısım) + 20px (sağ kısım))px olarak hesaplanıyor ve o divin dışına çıkıyor.

Bu taşmayı önlemek için CSS komutlarından box-sizing: border-box; özelliğini kullancağız bu komut bize içteki divin taşmamasını sağlayacak.

Yukarıdaki örnekte de görebileceğiniz gibi kutu2 classlı dive ek olarak sadece box-sizing: border-box; komutunu yazdım ve dıştaki divin genişliğini birebir aldı hemde padding ile beraber

WEB DÜNYASI İLE İLGİLİ GÜNCEL BİLGİLER İÇİN ABONE OLUN!

"Css ile padding ve width 100% verirken taşma sorunun çözümü" Benzer Yazıları

Whatsapp Web ile bilgisayarınızdan yazışın Facebook"a çıkartma-Sticker yapma