CSS3：margin-top、margin-right、margin-bottom、margin-leftプロパティ

名前	`margin-top`、 `margin-right`、 `margin-bottom`、 `margin-left`
値	<length-percentage> \| auto
初期値	0
適用対象	次に挙げるものを除く、すべての要素：内部テーブル要素、ルビ基底コンテナ、ルビ注釈コンテナ
継承	されない
百分率	包含ブロックの論理横幅を基準にする
算出値	キーワード auto あるいは算出された <length-percentage> 値
正準的順序	文法に従う
アニメーション型	算出値の型による

これらのプロパティは、挙げられた順にボックスの［上端、右端、下端、左端］マージンを設定する。

各種マージンプロパティに対しては、負な値も許容されるが、実装に特有な制限があり得る。

<length> は固定値によるマージンの寸法です。

<percentage> は内包ブロックの width に対するパーセントによるマージンの寸法です。

<DIV style="width:200px; border:1px solid black">
 開始<SPAN style="border:1px solid red;
  margin-top:5px;
  margin-left:10px;
  margin-right:20px;
  margin-bottom:5px;
 ">SPAN</SPAN>終了
</DIV>

inline要素にはmargin-top、margin-bottomは効かない。

<DIV style="width:150px; border:1px solid black">
 <SPAN style="margin-left:10px; border:1px solid red">SPAN</SPAN>
</DIV>

<DIV style="width:150px; border:1px solid black">
 <SPAN style="margin-left:10%; border:1px solid red">SPAN</SPAN>
</DIV>

<DIV style="width:150px; border:1px solid black">
 <SPAN style="border:1px solid red;
  margin-left:auto;
  margin-right:10px;
 ">SPAN</SPAN>
</DIV>

¶これで右寄せにはならないようだ

auto

ブラウザ―が適切な値を選択して使用します。例えば、特定の場合に要素を中央揃えするためにこの値を使用します。

<DIV style="width:150px; border:1px solid black;
">
 <DIV style="border:1px solid red;
  width:100px;
  margin-left:auto;
 ">内容</DIV>
 <DIV style="border:1px solid red;
  width:100px;
  margin-left:auto;
  margin-right:auto;
 ">内容</DIV>
</DIV>

スクリプト：

スクリプト：

CSS3

プロパティ

margin-top、margin-right、margin-bottom、margin-left

テスト