html5 marginとpaddingで余白を設定する

htmlで余白の設定をするときは、marginとpaddingのスタイルを使用します。

例えば、以下のように色を分けて表示しても、要素どうしがくっついてしまい、わかりづらくなってしまいますので、余白を設定します。

<div style="background-color:red; border:solid 3px blue;">
  <span style="background-color:orange;">トマト</span>は赤い
</div>
<div style="background-color:green; border:solid 3px blue;">
  <span style="background-color:orange;">ピーマン</span>は緑
</div>

margin

要素と要素の間の余白を設定する場合はmarginを使用します。以下のように指定すると要素と要素の間の上下左右の余白が10pxできることになります。

style="margin:10px;"

部分的に設定する

html5 ボーダーのスタイルで罫線を表示するで紹介したボーダーの指定方法と同じように、-top、-bottom、-left、-rightをつけると指定した部分のみにスタイルを反映することができます。

例えば、margin-top: 5px;とすると、上部分のみに5pxの余白ができます。

スペースで区切って指定する

こちらもボーダーと同じように値をスペースで区切ることにより、上下左右のスタイルを指定できます。上下左右に反映されるスタイルは基本的に同じように指定することができます。

margin:10px;のように、１つだけ値を指定した場合は、上下左右がそのスタイルになります。

margin:10px 5px;のように、２つ値を指定した場合は、１つ目が上下、２つ目が左右のスタイルになります。

margin:10px 5px 15px;のように、３つ値を指定した場合は、１つ目が上、２つ目が左右、３つ目が下のスタイルになります。

margin:10p 5px 15px 20px;のように、４つ値を指定した場合は、１つ目が上、２つ目が右、３つ目が下、４つ目が左のスタイルになります。

divのブロック要素に対してmarginのスタイルを適用します。

<div style="margin:20px; background-color:red; border:solid 3px blue;">
  <span style="background-color:orange;">トマト</span>は赤い
</div>
<div style="margin:20px; background-color:green; border:solid 3px blue;">
  <span style="background-color:orange;">ピーマン</span>は緑
</div>

ネガティブマージン

marginの値にマイナス値も設定することができます。マイナス値を設定したmarginをネガティブマージンと呼ぶことが多いです。複雑なレイアウトで位置を微調整したい場合や、要素を重ねたい場合などに使用します。うまく使いこなせれば、凝ったレイアウトを作ることができますが、多用し過ぎるとレイアウトがわかりづらくなってしまいますので注意が必要です。

padding

marginが要素の外側の余白を設定するのに対して、paddingは要素の内側の余白を設定します。

「内側」という表現はわかりづらいかもしれませんが、ボーダーより内側のことを指します。

実際にpaddingを指定すると以下のようになります。

<div style="padding:20px; margin:20px; background-color:red; border:solid 3px blue;">
  <span style="background-color:orange;">トマト</span>は赤い
</div>
<div style="padding:20px; margin:20px; background-color:green; border:solid 3px blue;">
  <span style="background-color:orange;">ピーマン</span>は緑
</div>

paddingはmarginとは異なり、マイナス値を指定できません。

ボーダーや背景色を指定しない場合は、marginでもpaddingでも見た目は変わりませんが、目的に合わせて使い分けていきましょう。

インライン要素の余白

上記の例ではすべてブロック要素に対して余白を設定していましたが、インライン要素に対しても余白を設定することができます。

ただし、marginの上下は設定することができません。

<div style="padding:20px; margin:20px; background-color:red; border:solid 3px blue;">
  <span style="padding:20px; margin:20px; background-color:orange;">トマト</span>は赤い
</div>
<div style="padding:20px; margin:20px; background-color:green; border:solid 3px blue;">
  <span style="padding:20px; margin:20px; background-color:orange;">ピーマン</span>は緑
</div>