【CSS】margin - マージン

【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>