解 説

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

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

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

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

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

サンプル