IT課程 CSS基礎 025_邊距和填充

邊距

在CSS中，邊距與填充是兩個不同的概念，都是用於控制元素之間的空間和影響頁面的佈局。

示例效果

邊距（外邊距）

邊距（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>

效果：示例效果

邊距

邊距（外邊距）

填充（內邊距）

評論