マージンの一括設定 【margin】
ブラウザで表示した時の見え方
ソースサンプル
【CSS】
.margin {
margin: 50px;
border: #000000 1px solid
}
【HTML】
<div class="margin">ボックスの外側に指定した数値の余白があります</div>
[
黒※説明中のタグ
紫※省略可能なタグ
赤※変更可能
緑※文章など
]
解説
- margin: 10px 5px 1px 20px(上、右、下、左) のように記述すれば、一辺ずつ別の数値を設定できます。
- margin: 10px 1px 5px(上、左右、下) という風に、設定するやり方もあります。
- margin: 10px 1px(上と下、右と左) という風に、上下・左右に分けて設定するやり方もあります。
| オプション |
| 実数値 | 数値で設定する | margin-top: 20px |
| % | 親ボックスの横幅に対する割合で設定する | margin-left: 10% |
| auto | 自動設定する | margin-left: auto |
| 値 | 機能 | 例 |
AICHAN WEB(Z)
>
HTML＆CSSサンプル集(S)
>
マージンの一括設定