16.4.11 マージンとパディング

マージン・パディングの意味

まず次の例を見てください．

<div style="border:1px solid black"><div style="border:1px solid red;">ボックス要素の境界</div></div>

ボックス要素の境界

この例では，外側にあるdiv要素の境界と内側にあるdiv要素の境界がぴったりくっついています．ですが次のようにすると，境界を引き離すことができます．

<div style="border:1px solid black"><div style="border:1px solid red;margin:3px;">外側に余白を取る</div></div>

外側に余白を取る

今使った margin:3px; という命令は，境界(この例では，赤い境界)の外側に長さ3pxの余白を取るという意味です．このように，境界の外側に取る余白のことをマージンといいます．また，境界の内側にある文字は次のようにして境界から引き離すことができます．

<div style="border:1px solid black"><div style="border:1px solid red;margin:3px;padding:5px;">内側に余白を取る</div></div>

内側に余白を取る

マージンと同様，padding:5px;という命令が境界の内側に5pxの余白を取ることを意味しています．このような，境界の内側の余白のことをpadding（パディング）といいます．なお，境界を表示していなくてもマージン・パディングの調整をすることはできます．境界が表示されていないときは「太さ0の境界が存在する」と考えてください．

マージンの指定

マージンを指定するには，margin-top,margin-bottom,margin-left,margin-right プロパティを使います．それぞれで上下左右のマージンを指定することができます．

例:

h1{ margin-left:3px; }

margin プロパティを使うと，上下左右の境界を一度に指定することが出来ます．border関係のプロパティと同様，これも上，右，下，左の順で指定します．また1つの値のみを指定すると，その値が全ての境界に対して適用されます．

パディングの指定

パディングの指定はマージンと同様，padding-top,padding-bottom,padding-left,padding-rightプロパティを用います．一律指定には padding プロパティを使います．これの書き方も margin プロパティと全く同様です．