外部余白や整列 (margin)


margin

 marginはコンテナの境界と他のコンテナとの間の余白です(下の図参照)。

CSS Box Model

 例えば、HTML本体 (body) をブラウザ画面の端から40ピクセル離したいときは、次のようにします。

body {
  margin: 40px;
}

 margin属性の値は次のように定義されます。

margin: value;

 値は絶対値の他、以下の値を指定できます。

意味
length余白の値(デフォルトは0)
%余白の値(コンテナの幅や高さに対する相対値)
auto自動
initial初期値(余白なし)
inherit親要素から継承する。

 余白を空ける場所は個別に、margin-left, margin-right, margin-top, margin-bottomで指定できます。下の例はパラメータに絶対値(単位はピクセル)を指定したものです。

#div1 {
  margin-left: 40px;
  margin-top: 20px;
  border: solid medium black;
  width:120px;
  height: 60px;
  background-color: silver;
 }

 下の例は親のコンテナ(黄色の矩形)に対する相対位置(%)を指定したものです。

#div2 {
  margin-left: 30%;
  margin-top: 25%;
  border: solid medium black;
  width:120px;
  height: 60px;
  background-color: silver;
 }

 下の例は親のコンテナ(黄色の矩形)に対し、自動(auto)位置合わせをしてしたものです。左右方向は自動位置合わせできますが、上下方向はできないようです。左右のマージンを自動にすると中央に配置できます。

#div3 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  border: solid medium black;
  width:120px;
  height: 60px;
  background-color: silver;
 }

 

このページの先頭へ戻る