通过margin-top和margin-bottom属性可调整段落上下间距,p{margin-top:20px;margin-bottom:20px}设置上下20像素空白,使用简写margin:20px10px可同时定义上下左右边距,上下间距常设为1em以提升可读性,注意重置浏览器默认样式。

在CSS中调整段落的上下外边距,主要通过 margin-top 和 margin-bottom 属性来实现。这两个属性控制元素与其他元素之间的垂直间距,特别适用于调节段落(p 标签)之间的距离。
设置 margin-top 和 margin-bottom 的基本语法
你可以为段落元素单独设置上边距和下边距:
p {margin-top: 20px;
margin-bottom: 20px;
}
上面的代码会让每个段落的上方和下方都留出 20 像素的空白区域,从而与其他内容保持一定距离。
使用简写属性设置上下外边距
如果你希望同时设置上下左右的外边距,可以使用 margin 简写属性。当提供两个值时,第一个是上下,第二个是左右:
立即学习“前端免费学习笔记(深入)”;
margin: 20px 10px;
}
这表示上下外边距为 20px,左右为 10px。如果只想统一设置上下间距,这种方式更简洁。
常见应用场景与建议
在实际开发中,合理设置段落间距能提升文本可读性:
- 正文段落之间通常设置
margin-bottom: 1em,使用相对单位更适应不同屏幕 - 标题与段落之间的间距可通过调整
margin-top来避免拥挤 - 注意浏览器默认样式可能已为
p元素设置了外边距,重置时可用 CSS Reset 或自定义初始化
基本上就这些。掌握 margin-top 和 margin-bottom 的用法,能让你更灵活地控制页面排版中的垂直空间。不复杂但容易忽略细节。










