段落间距由css的margin或line-height控制,非p标签默认属性;浏览器为p元素设默认上下外边距(各1em),删除或调整即可改变间距;推荐仅设margin-bottom并用rem/em单位;line-height调节行内行距而非段间距。

段落间距不是靠 <p></p> 标签自带属性控制的,而是由 CSS 的 margin 或 line-height 决定的 —— 直接改 <p></p> 的 style 或外部样式表最可靠。
为什么 <p></p> 之间总有空隙?
浏览器对 <p></p> 有默认 margin-top 和 margin-bottom(通常各 1em),不是“段落本身高”,而是上下外边距在撑开距离。删掉它,间距就没了;调大它,间距就变大。
- 别试图用
<br>或多个<p></p>堆出间距 —— 语义错、维护难、响应式下容易崩 - 别改
height或padding来“模拟”段间距 —— 这会改变段落容器尺寸,影响行内元素对齐和盒模型计算 - 注意:
margin会合并(相邻块级元素的垂直 margin 取较大值),所以连续多个<p></p>不是简单叠加
用 margin 精确控制段落间距
最常用也最可控的方式,直接作用于 <p></p> 元素:
p {
margin-top: 16px;
margin-bottom: 24px;
}
- 推荐只设
margin-bottom,让第一个段落顶着上文,避免顶部意外留白 - 用
rem或em更利于缩放和可访问性,比如margin-bottom: 1.5rem - 若需全局统一,写在基础样式里;若仅某类段落(如正文、说明文字),加 class 更安全:
<p class="article-paragraph"></p>
什么时候该调 line-height 而不是 margin?
line-height 控制的是**行内文本的行间距**,不是段与段之间的距离。但它会影响单个 <p></p> 内多行文字的松紧感,尤其当段落内换行频繁(如诗歌、地址、代码注释)时:
立即学习“前端免费学习笔记(深入)”;
- 设
line-height: 1.6是常见可读性选择;设line-height: 1会让多行文字挤在一起 -
line-height数值无单位时,是相对于当前字体大小的倍数,比用px更健壮 - 它不会影响段落容器高度计算中的 margin 合并行为,和
margin是正交控制
IE8 及更老浏览器的兼容处理
老版本 IE 对 margin 合并和 rem 支持差,如果必须兼容:
- 避免用
rem,改用em或固定px(如margin-bottom: 20px) - 遇到 IE 下
<p></p>上边距“消失”,可能是 hasLayout 问题,可临时加zoom: 1触发 - 不要依赖
:first-child或:last-child去微调首尾段落间距 —— IE8 不支持这些伪类
真正麻烦的不是怎么设间距,而是忘记重置用户代理样式或没考虑 margin 合并 —— 这俩点一漏,调试时就会反复怀疑是不是自己写错了。











