CSS margin 属性

定義と用法

marginショートカット属性は、すべてのマージン属性を1つの宣言で設定します。この属性には1から4つの値があります。

説明

このショートカット属性は、要素のすべてのマージンの幅を設定するか、または各側のマージンの幅を設定します。

ブロックレベルの要素の垂直に隣接するマージンは合計され、インライン要素は実際には上下のマージンを占めません。インライン要素の左右のマージンは合計されません。同様に、フロート要素のマージンも合計されません。負のマージン値を指定することもできますが、使用には注意が必要です。

注記：負の値を使用することもできます。

例1

margin:10px 5px 15px 20px;
  • 上マージンは10pxです
  • 右マージンは5pxです
  • 下マージンは15pxです
  • 左マージンは20pxです

例2

margin:10px 5px 15px;
  • 上マージンは10pxです
  • 右マージンと左マージンは5pxです
  • 下マージンは15pxです

例3

margin:10px 5px;
  • 上マージンと下マージンは10pxです
  • 右マージンと左マージンは5pxです

例4

margin:10px;
  • すべての4つのマージンは10pxです

も参照してください：

CSSトレーニング：CSS 外边距

HTML DOMリファレンスマニュアル：margin属性

例

p要素の4つのマージンを設定します：

p
  {
  margin:2cm 4cm 3cm 4cm;
  }

実際に試してみてください

CSS语法

margin: length|auto|initial|inherit;

属性値

値 説明
auto ブラウザがマージンを計算します。
length 具体的な単位でマージンの値を指定します。例えばピクセル、センチメートルなどです。デフォルト値は0pxです。
% 含む要素の幅のパーセントでマージンを指定します。
inherit 親要素からマージンを継承するべきことを規定しています。

技術的詳細

デフォルト値： 0
継承性： no
バージョン： CSS1
JavaScript语法： object.style.margin="10px 5px"

さらに多くの例

すべてのマージン属性を1つの宣言で
この例では、すべてのマージン属性を1つの宣言で設定する方法を示しています。

ブラウザのサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome IE / Edge Firefox Safari Opera
1.0 6.0 1.0 1.0 3.5