ももの知恵の樹

CSS-margin

CSS margin

margin（マージン）とは、文字や文章を表示するレイアウトの領域を設定するものです。


マージンの記述

記述方法は以下の通りです。 


#bannar{
  margin-top:10px;
  margin-bottom:20px;
  margin-right:30px;
  margin-left:40px;
}

上記内容を一行にまとめて記述することも可能です。

値を４つ指定した場合は記述した順に「上／右／下／左」のマージンとなります。 


#bannar{
  margin:10px 20px 30px 40px;
}

値を１つのみ指定した場合には、指定した値が「上下左右」全てのマージンとなります。 


#bannar{
  margin:10px;
}

値を２つ指定した場合には、記述した順に「上下」と「左右」のマージンとなります。 


#bannar{
  margin:10px 20px;
}

値を３つ指定した場合には、記述した順に「上」と「左右」と「下」のマージンとなります。 


#bannar{
  margin:10px 20px 40px;
}

CSS によるブロック要素の中央揃え

横幅の指定されたブロック要素に対して、左右のマージンを "auto" にすると、横幅の指定されたブロック要素のボックスを中央揃え（センタリング）にするような左右に等分のマージンが算出されることになります。 


margin-left : auto ;
margin-right : auto ;

関連ページ