CSS | margin | 外側の余白

margin(マージン)はボックスの外側の余白を指定するためのCSSプロパティです。 margin-top、margin-bottom、margin-left、margin-rightについても解説します。

外側の余白にはmargin、内側の余白にはpaddingを使います。

余白	外側	内側
全辺	`margin`	`padding`
上辺	`margin-top`	`padding-top`
下辺	`margin-bottom`	`padding-bottom`
左辺	`margin-left`	`padding-left`
右辺	`margin-right`	`padding-right`

`margin`

親子関係のある<div>要素を準備します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

実行結果初期状態

parent

child

.childクラスにmarginプロパティを設定すると外側に余白ができます。 10px、20px、30pxの例を示します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

CSS


.child {
    margin: 10px;
}

実行結果10px

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

CSS


.child {
    margin: 20px;
}

実行結果20px

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

CSS


.child {
    margin: 30px;
}

実行結果30px

parent

child

marginのデフォルト値は0です。

複数の設定値

上下左右で異なるmarginを設定するに複数の値を指定できます。

`margin`プロパティ
設定値の数	1番目	2番目	3番目	4番目
1	上下左右	-	-	-
2	上下	左右	-	-
3	上	左右	下	-
4	上	右	下	左

複数の設定値の例。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

CSS


.child {
    margin: 10px;
}

実行結果1つ

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

CSS


.child {
    margin: 10px 20px;
}

実行結果2つ

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

CSS


.child {
    margin: 10px 20px 30px;
}

実行結果3つ

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

CSS


.child {
    margin: 10px 20px 30px 40px;
}

実行結果4つ

parent

child

`margin-top`

margin-topで上辺のmarginを指定できます。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

CSS


.child {
    margin:     1rem;
    margin-top: 4rem;
}

実行結果上辺

parent

child

`margin-bottom`

margin-bottomで下辺のmarginを指定できます。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

CSS


.child {
    margin:        1rem;
    margin-bottom: 4rem;
}

実行結果下辺

parent

child

`margin-left`

margin-leftで左辺のmarginを指定できます。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

CSS


.child {
    margin:      1rem;
    margin-left: 4rem;
}

実行結果左辺

parent

child

`margin-right`

margin-rightで右辺のmarginを指定できます。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


div {
    display: inline-block;   /* インライン・ブロック要素 */
}

.parent {
    border: 5px dotted green; /* 境界線 */
}

.child {
    border:     5px solid blue;
    font-size:  2rem;           /* 文字の大きさ */
    padding:    10px;           /* 内側の余白 */
}

CSS


.child {
    margin:       1rem;
    margin-right: 4rem;
}

実行結果右辺

parent

child