ボックスのマージンの幅をまとめて指定する

margin

{ margin マージン : -top -right -bottom -left; }

marginプロパティは、ボックスの外側の余白(マージン)をまとめて指定するショートハンドです。

初期値 各プロパティに準じる
継承 なし
適用される要素 テーブル関連要素以外のすべての要素。ただし、displayプロパティでtable-caption、table、inline-tableが指定された要素には適用可能
モジュール CSS basic box model

値の指定方法

指定できる値はmargin系プロパティと同様です。値は半角スペースで区切って4つまで指定でき、それぞれ上辺、右辺、下辺、左辺に適用されます。省略した場合は以下のような指定になります。

  • 値が1つ すべての辺に同じ値が適用されます。
  • 値が2つ 1つ目が上下辺、2つ目が左右辺に適用されます。
  • 値が3つ 1つ目が上辺、2つ目が左右辺、3つ目が下辺に適用されます。

サンプルコード

.m1{margin: 0;}
.m2{margin: 15px; }
.m3{margin: 30px; }
.m4{margin: 60px 20% 0px 1em;}

関連記事