★margin-top（マージン）
margin-right
margin-bottom
margin-left

戻る

margin-top（マージン）
margin-right
margin-bottom
margin-left

解説
上下左右のマージンを個別に指定する属性です（まとめて指定する属性は、marginです。）。
margin-top：
上マージンを指定する属性
margin-right：
右マージンを指定する属性
margin-bottom：
下マージンを指定する属性
margin-left：
左マージンを指定する属性

値

<length>マイナスの値の指定可
<percentage>
auto：自動的に指定L1

初期値

0

%値の基準 親エレメントの幅

適用

すべてのエレメント

継承

しない


対応状況（各属性共通）
<length> L1 L2 N4 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 E3 E4 E5 ME5 E55 E6
<percentage> L1 L2 N4 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 E3 E4 E5 ME5 E55 E6
auto L1 　 N4 N6 N7 O6 ff1 O7 NA1 GA1 MO1 K2 K3 　 E4

E5

 ME5 E55 E6
使用例

ソース

スタイル部に、

div{border:solid medium yellow;}
.left{margin-left:100pt;}
.right{margin-right:100pt;}
.top{margin-top:30pt;}
.bottom{margin-bottom:30pt;}
.nogood1{font-size:22pt;color:green;}
.nogood2{font-size:22pt;color:lime;margin-top:-29pt;margin-left:-2pt;}

と記述し、

body部に、

<div class="nogood1">こんな使い方は止めましょう。</div>
<div class="nogood2">こんな使い方は止めましょう。</div>
<div>マージン指定無し</div>
<div class="left">左マージン100ptです。</div>
<div class="right">右マージン100ptです。</div>
<div class="top">上マージン30ptです。</div>
<div class="bottom">下マージン30ptです。</div>

と記述すると。

表示＆操作

こんな使い方は止めましょう。
こんな使い方は止めましょう。
マージン指定無し
左マージン100ptです。
右マージン100ptです。
上マージン30ptです。
下マージン30ptです。
　
と表示されます。

Copyright (C) pokochan 2000-2005
http://www.tees.ne.jp/~pokochan/style/margin-.html
E-mailpokochan@mx1.tees.ne.jp