プロパティ margin

プロパティ margin は要素の外側の余白を設定します。このプロパティの値は、任意のサイズの単位または、要素の余白をブラウザが独自に計算することを許可するキーワード auto です。デフォルトでは、各ブラウザは要素に様々な余白を追加する場合があります。

このプロパティは、以下のプロパティの短縮形です： margin-top、 margin-right、 margin-bottom、 margin-left。

構文

cssセレクタ {
  margin: 値;
}

値の数

プロパティ margin は、スペースで区切って指定された 1、2、3 または 4 の値を取ります：

例

まず、余白のないブロックです：

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 0;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

例

次に、ブロックに 10px の余白を設定します：

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

例

ブロックに上下 10px、左右 20px の余白を設定します：

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px 20px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

例

ブロックに上 5px、右 15px、下 25px、左 35px の余白を設定します：

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 5px 15px 25px 35px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

関連項目