CSS - margin

トップ > CSSリファレンス > margin

概要

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

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS13.01.01.03.51.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
<h5>margin:1em</h5>
<div style="border:1px solid #999999; width:300px;">
  <div>あああああああああああああああ</div>
  <img src="../image/back.gif" alt="" style="margin:1em">
  <div>あああああああああああああああ</div>
</div>

<h5>margin:0em</h5>
<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
あああああああああああああああ
あああああああああああああああ

関連項目

margin, margin-top, margin-right, margin-bottom, margin-left

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年10月25日
http://www.tohoho-web.com/css/prop/margin.htm