用margin和padding控制段落间距最直接,p标签默认靠浏览器内置margin产生间距,应统一设margin: 0.8em 0,避免br换行、line-height混淆及margin合并问题。
用 margin 和 padding 控制段落间距最直接
HTML 本身没有“段落间距”属性,
标签默认有浏览器内置的 margin-top 和 margin-bottom(通常约 1em),所以段落之间看起来有空隙。真正可控的是 CSS 的 margin(外边距)和 padding(内边距)。
常见错误是只改 margin-top 忽略 margin-bottom,导致相邻段落间距翻倍;或在父容器上加 padding 却没意识到它会撑开容器高度。
- 想统一所有段落间距:给
p设margin: 0.8em 0;(上下 0.8em,左右 0) - 只想调某个段落:加 class,比如
,再写…
.tight { margin-bottom: 0.5em; } - 避免父子 margin 合并(collapsing margin):给父容器设
overflow: hidden;或padding: 0.01px;
不是控制段落间距的合理方式
用多个 换行来“撑开”段落,看似简单,实则破坏语义、不可维护、响应式下极易错乱。它只是换行符,不是间距控制机制。
典型问题包括:缩放页面时 数量固定,间距不随字体缩放;打印样式中可能被忽略;屏幕阅读器会逐个读出“换行”,影响可访问性。
立即学习“前端免费学习笔记(深入)”;
- 绝对不要写
第一段