上下左右のマージン 【margin-top、margin-bottom、margin-left、margin-right】
ブラウザで表示した時の見え方
ソースサンプル
【CSS】
.margin {
margin-left: 30%;
border: #000000 1px solid
}
【HTML】
<div class="margin">ボックスの左外側に指定した数値の余白があります</div>
[
黒※説明中のタグ
紫※省略可能なタグ
赤※変更可能
緑※文章など
]
解説
- 例えば、ボックスとボックスとの間隔（マージン）の設定をします。その領域の外側の間隔のことです。
- ブロックレベル要素の左右のマージンをどちらも「auto」に設定すると、センタリングされます。
| オプション |
| 実数値 | 数値で設定する | margin-top: 20px |
| % | 親ボックスの横幅に対する割合で設定する | margin-left: 10% |
| auto | 自動設定する | margin-left: auto |
| 値 | 機能 | 例 |
AICHAN WEB(Z)
>
HTML＆CSSサンプル集(S)
>
上下左右のマージン