技術コンテンツ

CSS

No.101 margin / マージン

【CSS】margin - マージン

CSSのmarginプロパティについて解説します。

検証環境

CSS

macOS

14.1

margin

marginは“マージン”のプロパティです。

上下左右のマージンを一括設定します。

各マージンの個別設定はmargin-top、margin-bottom、margin-left、margin-rightを使用します。

【CSS】margin-top - マージン（上）

【CSS】margin-bottom - マージン（下）

【CSS】margin-left - マージン（左）

【CSS】margin-right - マージン（右）

基本構文

４パターンの基本的な構文があり、それぞれ値の個数が異なります。

全て（値：１個）

値が１個の場合、全て（上下左右）のマージンに適用します。

margin: 値;

上下・左右（値：２個）

値が２個の場合、値1は上下、値2は左右のマージンに適用します。

margin: 値1 値2;

上・左右・下（値：３個）

値が３個の場合、値1は上、値2は左右、値3は下のマージンに適用します。

margin: 値1 値2 値3;

上・右・下・左（値：４個）

値が４個の場合、値1は上、値2は右、値3は下、値4は左のマージンに適用します。

margin: 値1 値2 値3 値4;

サンプル

全て

sample.html

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

プレビュー

上下・左右

sample.html

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

プレビュー

上・左右・下

sample.html

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

プレビュー

上・右・下・左

sample.html

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

プレビュー