marginプロパティ 【margin property】
書式は「margin: 空白の幅」で、幅はピクセル(px)や親オブジェクトのサイズに対するパーセンテージ(%)、文字幅に対する割合(emあるいはrem)などで指定できる。
値は1つから4つまで指定することができ、1つの場合は四辺のすべてに同じ空白を設ける。2つの場合は1番目が上下、2番目が左右の空白に適用される。3つの場合は1番目が上、2番目が左右、3番目が下となる。4つの場合は先頭から順に上、右、下、左を表す。
いずれか一辺についてのみ指定したい(他の辺の現在の指定状態を変更したくない)場合には、「margin-top」(上辺のみ)、「margin-right」(左辺のみ)、「margin-bottom」(下辺のみ)、「margin-left」(左辺のみ)の各プロパティを設定する。
テーブル内部の要素(td、tr、thなど)以外で有効だが、displayプロパティでテーブル内要素と同じになるよう指定(display:tableなど)した要素では無効となる。spanなどインライン要素では上下の指定は無効で左右のみ反映される。
隣接する要素にもmarginプロパティが指定されている場合、空白の幅は両者の値を合算したものにはならず、両者の値のうち大きい方の値が採用される。例えば、画像の右側に10px、その右に並ぶ画像の左側に20pxのmarginが指定されている場合、両者の間には20pxの空白が設定される。
一方、要素の境界の内側に空白を設定したい場合はpaddingプロパティを指定する。コンテナ要素の中にある別の要素が、コンテナの境界線からどのくらい内側に離れているかを指定するもので、テーブルセルなどでも有効である。
(2022.1.22更新)