ITコース CSS基礎 025_マージンとパディング

マージン

CSSにおいて、マージンとパディングは2つの異なる概念で、どちらも要素間のスペースを制御し、ページレイアウトに影響を与えるために使用されます。

例の効果

マージン（外部余白）

マージン（margin）は、要素とその隣接する要素の間のスペースを指します。マージンは要素間の距離を制御し、ページレイアウトに影響を与えるために使用できます。マージン自体には背景色がなく、完全に透明で、要素の実際のサイズには影響しません。正または負の値を設定でき、単位はピクセル（px）、パーセント（%）、emなどが使用できます。

例：

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        margin: 10%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        margin: -50px 50px;
11
        background-color: green;
12
    }
13
    .example3 {
14
        margin: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

効果：例の効果 margin-top、margin-right、margin-bottom、margin-left を使用して、特定の方向のマージンを個別に設定できます。

例：

1
    .example1 {
2
        margin-top: 100px;
3
        margin-right: 50px;
4
        margin-bottom: 80px;
5
        margin-left: 50px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1"></div>

効果：

例の効果

パディング（内部余白）

パディング（padding）は、要素の内部コンテンツと要素の境界線の間のスペースを指します。パディングは要素の内部コンテンツと境界線の間の距離を調整し、要素のサイズとレイアウトに影響を与えるために使用できます。パディングは要素の背景色を継承し、要素の実際のサイズに影響します。負の値はサポートされておらず、単位はピクセル（px）、パーセント（%）、emなどが使用できます。

例：

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        padding: 3%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        padding: 10px 50px ;
11
        background-color: green;
12
    }
13
    .example3 {
14
        padding: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1">paddingテスト</div>
2
    <br>
3
    <div class="base example2">paddingテスト</div>
4
    <br>
5
    <div class="base example3">paddingテスト</div>

効果：

例の効果 padding-top、padding-right、padding-bottom、padding-left を使用して、特定の方向のパディングを個別に設定できます。

例：

1
    .example1 {
2
        padding-top: 20px;
3
        padding-right: 50px;
4
        padding-bottom: 80px;
5
        padding-left: 10px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1">paddingテスト</div>

効果：例の効果

マージン

マージン（外部余白）

パディング（内部余白）

コメント