CSS - margin

概要

属性名	margin
値	[ <length> \| <percentage> \| auto ]{1,4}
初期値	個々の属性を参照
適用可能要素	すべての要素
継承	継承しない
メディア	visual

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS1	3.0	1.0	1.0	3.5	1.0

説明

マージンを指定します。

値	説明
<length>	マージンを 10px, 1.5em などの長さの単位で指定します。
<percentage>	マージンを 10% など、要素の大きさに対するパーセントで指定します。
auto	マージンを自動計算します。

マージンは、下記の例で、赤いボーダーラインと周りのコンテンツとの間の隙間に相当します。赤いボーダーラインと内部のコンテンツとの間の隙間(パディング)を指定するには paddingを指定します。

周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテ

内側のコンテンツ内側のコンテンツ内側のコンテンツ内側のコンテンツ内側のコ

ンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコ

マージンは 1～4個指定可能で、それぞれ、次のように解釈されます。

margin: 10px;				/* 上側:10px、右側:10px、下側:10px、左側:10px */
margin: 10px 20px;			/* 上側:10px、右側:20px、下側:10px、左側:20px */
margin: 10px 20px 30px;		/* 上側:10px、右側:20px、下側:30px、左側:20px */
margin: 10px 20px 30px 40px;	/* 上側:10px、右側:20px、下側:30px、左側:40px */

使用例

HTML

<h3>margin:1em</h3>
<div style="border:1px solid #999999; width:300px;">
  <div>あああああああああああああああ</div>
  <img src="../image/back.gif" alt="" style="margin:1em">
  <div>あああああああああああああああ</div>
</div>

<h3>margin:0em</h3>
<div style="border:1px solid #999999; width:300px;">
  <div>あああああああああああああああ</div>
  <img src="../image/back.gif" alt="" style="margin:0em">
  <div>あああああああああああああああ</div>
</div>

表示

margin:1em

あああああああああああああああ

margin:0em

あああああああああああああああ

リンク

初版：1997年7月27日、最終更新：2015年10月25日

https://www.tohoho-web.com/css/prop/margin.htm

CSS - margin

概要

サポート (説明)

説明

使用例

関連項目

リンク