marginプロパティ 【margin property】

概要

marginプロパティ(margin property)とは、CSSで指定できる属性の一つで、矩形(ボックス)の要素の外側に指定した幅の空白を設けるもの。

書式は「margin: 空白の幅」で、幅はピクセルpx)や親オブジェクトのサイズに対するパーセンテージ(%)、文字幅に対する割合(emあるいはrem)などで指定できる。

は1つから4つまで指定することができ、1つの場合は四辺のすべてに同じ空白を設ける。2つの場合は1番目が上下、2番目が左右の空白に適用される。3つの場合は1番目が上、2番目が左右、3番目が下となる。4つの場合は先頭から順に上、右、下、左を表す。

いずれか一辺についてのみ指定したい(他の辺の現在の指定状態を変更したくない)場合には、「margin-top」(上辺のみ)、「margin-right」(左辺のみ)、「margin-bottom」(下辺のみ)、「margin-left」(左辺のみ)の各プロパティを設定する。

テーブル内部の要素(tdtrthなど)以外で有効だが、displayプロパティテーブル内要素と同じになるよう指定(display:tableなど)した要素では無効となる。spanなどインライン要素では上下の指定は無効で左右のみ反映される。

隣接する要素にもmarginプロパティが指定されている場合、空白の幅は両者のを合算したものにはならず、両者ののうち大きい方のが採用される。例えば、画像の右側に10px、その右に並ぶ画像の左側に20pxmarginが指定されている場合、両者の間には20pxの空白が設定される。

一方、要素の境界の内側に空白を設定したい場合はpaddingプロパティを指定する。コンテナ要素の中にある別の要素が、コンテナの境界線からどのくらい内側に離れているかを指定するもので、テーブルセルなどでも有効である。

(2022.1.22更新)

他の辞典による解説 (外部サイト)

この記事の著者 : (株)インセプト IT用語辞典 e-Words 編集部
1997年8月より「IT用語辞典 e-Words」を執筆・編集しています。累計公開記事数は1万ページ以上、累計サイト訪問者数は1億人以上です。学術論文や官公庁の資料などへも多数の記事が引用・参照されています。
ホーム画面への追加方法
1.ブラウザの 共有ボタンのアイコン 共有ボタンをタップ
2.メニューの「ホーム画面に追加」をタップ
閉じる