横幅を固定してpaddingを使用したい | IT工房

paddingを設定しても横幅を変えない方法

paddingを設定するとwidthで指定した値よりも横幅が大きくなります。
これはボックスモデルのところで説明した内容です。

幅全体を固定したままpaddingを設定したい。つまりpadding分だけ内容領域が狭くなるようにする方法です。

クラスbox1とクラスbox2は入れ子状態にします。クラスbox1にwidthを指定して、クラスbox2にはpaddingを設定しています。クラスbox2はpaddingを広げても外に広がることができずに、内容領域を縮めてしまいます。これで全体幅を固定したままpaddingを設定した分内容領域が狭くなります。

比較のため下のクラスbox3とクラスbox4の入れ子状態では、幅もpaddingもクラスbox3に指定しています。
padding分だけ外に広がります。

サンプル

<div class="box1"><div class="box2">
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
</div></div>
<div class="box3"><div class="box4">
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
</div></div>

.box1 {
background-color: #0CF;
width: 300px;
}
.box2 {
background-color: #F60;
padding:0 50px;
}
.box3 {
background-color:#F9F;
width: 300px;
padding:0 50px;
}
.box4 {
background-color:#FF9;
}