marginプロパティは、自要素と他要素の間隔（マージン）を指定します。
| 値 (value) |
長さ | 巾や高さの単位参照。マイナスも指定出来ます。 |
| ％ | 上下左右共、該当要素の横幅から計算。 | |
| auto | 親要素と自要素の範囲から計算。 | |
| inherit | 親要素からの継承 | |
| 適用要素 | BODY要素とBODY要素の内容の を除く全ての要素 | |
| 初期値 | 未定義 | |
| 継承 | しません | |
XXXX はスタイルシート記述です。
XXXX はHTML記述です。
XXXX 背景色と内枠線は修飾対象要素の範囲です。
XXXX 背景色と外枠線は親要素です。
margin指定無しの表示を
<p>鳥啼く声す夢覚ませ</p>鳥啼く声す夢覚ませ
とします。親要素との子要素の隙間は、親要素のパディング領域です。
value で上下左右の要素との間隔を一括指定します。
| .m0 | { | margin | : | 0em | ; | } |
上記指定は、
| .m0 | { | margin-top | : | 0em | ; | |
| margin-right | : | 0em | ; | |||
| margin-bottom | : | 0em | ; | |||
| margin-left | : | 0em | ; | } |
と等価です。
鳥啼く声す夢覚ませ
value1 : 要素の上下指定
value2 : 要素の左右指定
| .m1 | { | margin | : | 0.5em 2em | ; | } |
上記指定は、
| .m1 | { | margin-top | : | 0.5em | ; | |
| margin-right | : | 2em | ; | |||
| margin-bottom | : | 0.5em | ; | |||
| margin-left | : | 2em | ; | } |
と等価です。
鳥啼く声す夢覚ませ
value1 : 要素の上側指定
value2 : 要素の左右指定
value3 : 要素の下側指定
| .m2 | { | margin | : | 1em 10% 0.5em | ; | } |
上記指定は、
| .m2 | { | margin-top | : | 1em | ; | |
| margin-right | : | 10% | ; | |||
| margin-bottom | : | 0.5em | ; | |||
| margin-left | : | 10% | ; | } |
と等価です。
鳥啼く声す夢覚ませ
value1 : 要素の上側指定
value2 : 要素の右側指定
value3 : 要素の下側指定
value4 : 要素の左側指定
| .m3 | { | margin | : | 1em 0em 0.5em -1em | ; | } |
上記指定は、
| .m3 | { | margin-top | : | 1em | ; | |
| margin-right | : | 0em | ; | |||
| margin-bottom | : | 0.5em | ; | |||
| margin-left | : | -1em | ; | } |
と等価です。
鳥啼く声す夢覚ませ
autoプロパティは、下記2例以外の確認が取れませんでした。
全てのブラウザで、autoプロパティが反映されるとはかぎりません。
