在CSS中，我们可以通过margin-top和margin-bottom两个属性分别设置元素的上外边距和下外边距，这两个属性是调整段落间距最常用的方式，能够灵活控制段落之间的垂直距离。
margin-top和margin-bottom基础语法
这两个属性都属于CSS外边距属性，基本语法格式如下：
/* 设置元素上外边距 */
选择器 {
margin-top: 取值;
}
/* 设置元素下外边距 */
选择器 {
margin-bottom: 取值;
}
常见的取值类型包括以下几种：
- 像素值：如20px，是固定长度单位，间距不会随页面尺寸变化
- 百分比：如5%，相对于包含块的宽度计算，会随页面宽度变化
- em单位：如1em，相对于当前元素的字体大小计算
- auto：浏览器自动计算外边距，通常用于水平居中，上下外边距设置auto一般无效
用上下外边距调整段落间距的示例
我们可以通过给段落标签p设置margin-top和margin-bottom来调整段落之间的间距，以下是具体的代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落间距调整示例</title>
<style>
/* 给所有段落设置上下外边距，调整段落间距 */
p {
margin-top: 15px;
margin-bottom: 15px;
font-size: 16px;
line-height: 1.5;
}
/* 也可以只设置下外边距，效果类似 */
.para-bottom {
margin-top: 0;
margin-bottom: 20px;
}
</style>
</head>
<body>
<p>这是第一个段落的内容，通过CSS设置的上下外边距，它和后续段落之间会产生对应的间距。</p>
<p class="para-bottom">这是第二个段落的内容，我们给这个段落只设置了下外边距，同样可以和下一个段落形成合适的间距。</p>
<p>这是第三个段落的内容，所有段落的间距都通过margin-top和margin-bottom统一控制，排版会更加整齐。</p>
</body>
</html>
调整段落间距的注意事项
外边距折叠问题
当两个垂直相邻的块级元素，上面的元素设置了margin-bottom，下面的元素设置了margin-top，它们的外边距会发生折叠，最终间距会取两个值中较大的那个，而不是两个值相加。比如上面段落margin-bottom是20px，下面段落margin-top是15px，最终两个段落的间距是20px。
如果需要避免外边距折叠，可以给其中一个段落添加内边距或者边框，或者改变元素的渲染模式，比如设置为flex容器内的子元素，外边距不会折叠。
取值的合理性
调整段落间距时，建议上下外边距的取值不要过大，一般建议在10px到30px之间，取值过小段落会显得拥挤，取值过大会让页面显得松散，影响阅读体验。同时建议上下外边距的取值保持一致，让段落间距更统一。
与其他属性的配合
段落间距的调整还需要配合行高line-height属性，行高控制段落内部行与行的距离，上下外边距控制段落之间的距离，两者配合才能让文本排版更舒适。不要只调整外边距忽略行高，也不要只调整行高忽略段落之间的外边距设置。
CSSmargin_topmargin_bottom段落间距修改时间：2026-06-13 08:33:24