CSS-margin



CSS margin

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


マージンの記述

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

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

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

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

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

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

#bannar{
  margin:10px;
}

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

#bannar{
  margin:10px 20px;
}

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

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

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

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

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

関連

CSS





スポンサード リンク