2.1 內邊距 (Padding)
內邊距 (padding) 定義了元素內容與其邊框之間的空間。padding 可以為元素的每一側設置：上、右、下、左。內邊距對於創建元素內容周圍的空間很有用，防止它緊貼著邊框。
使用範例
在這個範例中，帶有 .padding 類別的元素四周都設置了20像素的內邊距，創建了內容周圍的空間。
CSS
.padding {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
}
HTML
<div class="padding">
這是一個有內邊距的元素。
</div>
2.2 外邊距 (Margin)
外邊距 (margin) 定義了元素與相鄰元素之間的空間。外邊距可以為元素的每一側設置：上、右、下、左。外邊距對於創建元素之間的空間很有用，避免它們重疊。
使用範例：
CSS
.margin {
background-color: #e0e0e0;
border: 2px solid #000;
margin: 20px;
}
HTML
<div class="margin">
這是一個有外邊距的元素。
</div>
2.3 方塊模型組件交互
方塊模型的所有四個組件（內容、內邊距、邊框和外邊距）一起運作，以確定元素在頁面上的總大小和位置。
組件交互示例：
CSS
.box {
background-color: #e0e0e0;
padding: 20px;
border: 5px solid #000;
margin: 30px;
width: 200px;
}
HTML
<div class="box">
這是一個有外邊距和內邊距的元素。
</div>
代碼解釋：
- 內容: 元素內的文本
- 內邊距: 20像素，創建內容和邊框之間的空間
- 邊框: 5像素，包圍元素
- 外邊距: 30像素，創建元素與頁面上其他元素之間的空間
2.4 負外邊距
外邊距可以是負值，這會導致元素重疊。
CSS
.negative-margin {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
margin-top: -12px;
}
HTML
<div>
這是一個普通元素
</div>
<div class="negative-margin">
這是一個有負上邊距的元素。
</div>
2.5 外邊距塌陷
當兩個相鄰塊的垂直外邊距相遇時，它們可以塌陷為一個邊距，等於兩者中較大的。
CSS
.box1 {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
margin-bottom: 30px;
}
.box2 {
background-color: #d0d0d0;
padding: 20px;
border: 2px solid #000;
margin-top: 20px;
}
HTML
<div class="box1">
這是第一個元素。
</div>
<div class="box2">
這是第二個元素。外邊距塌陷至30像素。
</div>
GO TO FULL VERSION