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

  • 4 Şubat 2015
  • 31 Okunma
  • Yorum Yok
  • 3 DK

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

HAYATI KODLA'YA ABONE OLUN!!
ETKİLEYİCİ BİR YORUM BIRAK

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

"Css ile padding ve width 100% verirken taşma sorunun çözümü" Yazısına uygun diğer makalerler