margin

marginは、要素の外側の余白を指定するスタイルです。

解説

要素の外側の余白サイズを指定します。
指定方法には、数値・割合・autoの３パターンがあります。

marginには下図のように要素の上下左右の４種類のサイズがあり、値の指定の仕方により４か所のサイズを指定する事ができます。

• 値を１つ指定した時：指定したマージンが上下左右に適用されます。
• 値を２つ指定した時：１つ目が上下、２つ目が左右に適用されます。
• 値を３つ指定した時：１つ目が上、２つ目が左右、３つ目が下に適用されます。
• 値を４つ指定した時：１つ目が上、２つ目が右、３つ目が下、４つ目が左に適用されます。

構文

構文は以下になります。

値

marginには以下の値が指定できます。

marginの初期値は0です。

サンプル

上下左右のマージンを10pxにする

.sample01 {
  margin:10px;
}

<div class="sample01">上下左右10px</div>

マージンを上下を10px、左右20pxにする

.sample02 {
  margin:10px 20px;
}

<div class="sample02">上下10px左右20px</div>

マージンを上を10px、左右20px、下を30pxにする

.sample03 {
  margin:10px 20px 30px;
}

<div class="sample03">上10px左右20px下30px</div>

マージンを上を10px、右20px、下を30px、左40pxにする

.sample04 {
  margin:10px 20px 30px 40px;
}

<div class="sample04">上10px右20px下30px左40px</div>

マージンを上下を10px、左右をautoにする

.sample05 {
  margin:10px auto;
}

<div class="sample05">上下10px左右auto</div>

左右に対してautoを指定すると、左右の中央になるようにマージンが設定されます。

関連項目

• margin：要素の外側の余白を指定する
• padding：要素の内側の余白を指定する

Tweet