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