CSSでのパディング作業
ある要素の幅を
100pxに設定したとします。
CSSにおいて、これは必ずしも要素の実際の幅が
100pxになることを意味しません。
なぜなら、paddingを追加すると要素が拡張され、
widthプロパティで指定された値よりも
大きくなってしまうからです。
例を見てみましょう。
幅を100ピクセルに設定した2つのブロックを作ります。
ただし、2番目のブロックにはpaddingを設定し、
1番目のブロックには設定しません。
結果として、2番目のブロックはパディングの分だけ大きくなります：
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
padding: 25px; /* パディングを設定 */
width: 100px;
height: 100px;
background: #f1f1f1;
}
:
