【CSS】margin - マージン
CSSのmarginプロパティについて解説します。
検証環境
margin
marginは“マージン”のプロパティです。
上下左右のマージンを一括設定します。
各マージンの個別設定はmargin-top、margin-bottom、margin-left、margin-rightを使用します。
基本構文
4パターンの基本的な構文があり、それぞれ値の個数が異なります。
全て(値:1個)
値が1個の場合、全て(上下左右)のマージンに適用します。
margin: 値;
上下・左右(値:2個)
値が2個の場合、値1
は上下、値2
は左右のマージンに適用します。
margin: 値1 値2;
上・左右・下(値:3個)
値が3個の場合、値1
は上、値2
は左右、値3
は下のマージンに適用します。
margin: 値1 値2 値3;
上・右・下・左(値:4個)
値が4個の場合、値1
は上、値2
は右、値3
は下、値4
は左のマージンに適用します。
margin: 値1 値2 値3 値4;
サンプル
全て
<style>
.box {
border: 1px solid black;
text-align: center;
}
.sample {
___ih_hl_start
margin: 40px;
___ih_hl_end
}
</style>
<p class="box">HTML</div>
<p class="box sample">CSS</div>
<p class="box">JavaScript</div>
上下・左右
<style>
.box {
border: 1px solid black;
text-align: center;
}
.sample {
___ih_hl_start
margin: 40px 160px;
___ih_hl_end
}
</style>
<p class="box">HTML</div>
<p class="box sample">CSS</div>
<p class="box">JavaScript</div>
上・左右・下
<style>
.box {
height: 30px;
border: 1px solid black;
text-align: center;
}
.sample {
___ih_hl_start
margin: 40px 120px 200px;
___ih_hl_end
}
</style>
<p class="box">HTML</div>
<p class="box sample">CSS</div>
<p class="box">JavaScript</div>
上・右・下・左
<style>
.box {
height: 30px;
border: 1px solid black;
text-align: center;
}
.sample {
___ih_hl_start
margin: 40px 80px 120px 160px;
___ih_hl_end
}
</style>
<p class="box">HTML</div>
<p class="box sample">CSS</div>
<p class="box">JavaScript</div>