Perl Web開発者のHTML・CSS入門

margin - マージンを設定する - CSS入門【CSS3対応】

マージンを設定するにはmarginをスタイルシート(CSS)で設定します。マージンとは、ブロックの外側にできる間隔のことです。

<div style="margin:10px;background:#eef">
  マージンを設定
</div>

<div style="margin:10px;background:#eef">
  マージンを設定
</div>

<div style="margin:10px;background:#eef">
  マージンを設定
</div>

マージンがブロックの外側にできる間隔、パディングがブロックの内側にできる間隔です。

マージンの効果

マージンの効果は、ブロックの間に、適切な間隔を作ることで、文字を読みやすくすることです。

上、右、下、左のそれぞれにマージンを設定

上、右、下、左のそれぞれにマージンを設定できます。設定する順番は、上、右、下、左の順です。

<div style="margin:10px 20px 30px 40px;background:#eef">
  マージンを上、右、下、左のそれぞれに設定
</div>

上下、左右のそれぞれにマージンを設定

上下、左右のそれぞれにマージンを設定できます。設定する順番は、上下、左右の順です。

<div style="margin:10px 30px;background:#eef">
  マージンを上下、左右のそれぞれに設定
</div>

上だけ、右だけ、下だけ、左だけにマージンを設定

「margin-top」「margin-right」「margin-bottom」「margin-left」を使うと上だけ、右だけ、下だけ、左だけにマージンを設定することができます。

<div style="margin-top:10px;background:#eef">
  マージンを上だけ設定
</div>
<div style="margin-right:10px;background:#eef;text-align:right;">
  マージンを右だけ設定(テキスト右寄せ)
</div>
<div style="margin-bottom:10px;background:#eef">
  マージンを下だけ設定
</div>
<div style="margin-left:10px;background:#eef">
  マージンを左だけ設定
</div>

上下マージンの相殺

上の要素の下のマージンと、下の要素の上のマージンは、相殺されます。「margin-bottom:20px;」と「margin-top:10px;」が足されて30pxになるのではなくって、相殺されて、大きい方の20pxになることに注意してください。

<div style="margin-bottom:20px;background:#eef">
  マージンを設定
</div>
<div style="margin-top:10px;background:#eef">
  マージンを設定
</div>

左右マージンについては、そのようなことは起こりません。

<div>
  <button style="margin-right:20px;">
    ボタン
  </button>
  <button style="margin-left:10px;">
    ボタン
  </button>
</div>

ブロックを中央寄せするための左右の自動マージン

ブロックを中央寄せするテクニックとして、左右マージンに「auto」を設定します。

<div style="margin:0 auto;width:200px;background:#eef;">
  ブロック中央寄せ
</div>

マージンのパーセント指定

マージンはパーセントでも指定できます。全体でちょうど100%にするように、隙間を空けたい場合に便利です。

<div style="display:flex">
  <div style="width:49%;margin-right:1%;background:#eef;">
    左ブロック
  </div>
  <div style="width:49%;margin-left:1%;background:#eef;">
    右ブロック
  </div>
</div>