Css Kayma Sorunu Kesin Çözüm - Padding Ve Margin

Css'de olmazsa olmazımız tasarım için kullanılan bir dildir. Bu dil ile her türlü sorunumuzu gidermekteyiz ve genellikle genişlik ve yükseklik verme vb. gibi şeyler için kullanırız evet zaten konumuz bunun üzerine. Sitemiz ya da temamız neden kayıyor diyorsanız altta anlattıklarımı okursanız sorununuz rahatlıkla çözülecektir. Bu arada sorun nedeni padding ve margin kullanmaktan dolayı ortaya çıkıyor şimdiden söyleyeyim.

Padding ve Margin Nasıl Sebep Oluyor?
<style>
.body{width:100%;padding:15px;}
</style>

<div class='body'>
<p>Deneme</p>
</div>

Şimdi üstte gördüğünüz gibi body elementine 100% uzunluk verdim diğelim ki görüntüleyen cihazın genişliği 100px; şimdi 100% verince body 100px oldu tabi ayriyeten sağ ve soldan boşluk eklenince bu 130px'e çıktı ve kayma oldu örnek resmi hemen altta verdim. Çözümü için yazıyı okumaya devam edin...

Peki Bu Sorunu Nasıl Çözeriz?
<style>
.body{width:100%;}
.body bosluk{padding:15px;}
</style>
<div class='body'>
<div class='bosluk'>
<p>Deneme</p>
</div>

Şimdi padding ve margin dışta oluşan bir boşluktur padding ne kadar da iç boşluk olsa da sonuçta köşede yani dış tarafta boşluk oluşturur. Bizde bir div oluşturduk ve classına bosluk yazdık ve padding:15px kullanarak dışında boşluk oluşturduk evet şimdi yine dışta boşluk oluştu fakat body classlı divin içindeki dive biz boşluk yaptığımızdan dolayı boşluk içte oluştu ve kayma sorunu ortadan kalktı. Umarım işinize yaramıştır (:

Soru Ve Görüşlerinizi yorum kısmında belirtebilirsiniz...