幅/高さに影響を与えずにDIVパディングを変更するにはどうすればよいですか？

固定幅と高さを指定したいdivと、元のDIVの幅/高さを減らしたり増やしたりせずに変更できるパディングがあります。そのためのCSSトリックはありますか、またはパディングを使用する代替はありますか？

解決策は、幅が固定された外側のdivを使用して、パディングされたdivをラップすることです

HTML

<div class="outer">
    <div class="inner">

        <!-- your content -->

    </div><!-- end .inner -->
</div><!-- end .outer -->

CSS

.outer, .inner {
    display: block;
}

.outer {
    /* specify fixed width */
    width: 300px;
    padding: 0;
}

.inner {
    /* specify padding, can be changed while remaining fixed width of .outer */
    padding: 5px;
}

これをCSSで宣言してください。

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

このソリューションは、追加のラッパーを使用せずに実装できます。

これにより、ブラウザーはdivの「外側」の幅に従って幅を計算します。つまり、幅からパディングが差し引かれます。

IE6ボックスモデルをシミュレートしているように見えます。CSS 3プロパティのbox-sizing：border-boxを使用してこれを実現できます。これはIE8でサポートされていますが、Firefoxの場合は使用する必要が-moz-box-sizingあり、Safari / Chromeの場合はを使用します-webkit-box-sizing。

IE6は既に高さを間違って計算しているので、そのブラウザーでは問題ありませんが、IE7についてはわかりません。Quirksモードでも同じように高さが計算されると思います。

このトリックを試してください

div{
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;    
 box-sizing: border-box;      
}

これにより、ブラウザーはdivの「外側」の幅に応じて幅を計算します。つまり、幅からパディングが差し引かれます。

ブラウザー間で一貫した結果を得るには、通常、div内にもう1つ追加しdivて、明示的な幅を指定せず、を指定しmarginます。marginシミュレートしますpadding外側のdivのために。