line-height 仅控制段内行距，margin 才负责段落间距；混用会导致排版错乱，正确做法是用 margin: 1.2em 0 控制段距，text-indent 实现首行缩进，line-height 设无单位值管行高。

line-height 是控制段落内文字行间距的正确属性，margin 才管段落与段落之间的空隙——两者不能混用，否则排版会错乱。

为什么 line-height 不能用来调段落间距

给 <p></p> 设 line-height: 2，只是让这一段里每行字之间变松，但两段 <p></p> 之间的距离还是浏览器默认的 margin。更麻烦的是：如果段落里有图片或 <input> 这类内联元素，line-height 还可能把整段撑高，导致上下不对齐。

• 常见翻车现象：<p><img src="a.jpg">文字</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 下方留白异常，其实是图片基线对齐产生的间隙，不是段距问题
• line-height 对空 <p></p> 或 font-size: 0 的容器无效——没字号就没计算基准
• 用 line-height: 1.6em 而不是 1.6，子元素继承后行高会固化，嵌套文本容易挤在一起

用 margin 控制段落间距才靠谱

段落之间该留多大空，本质是块级元素外边距问题，margin-top 和 margin-bottom 是唯一合理解法。

• 推荐写法：p { margin: 1.2em 0; } —— 上下各 1.2 倍当前字体大小，响应式安全
• 首段通常不该有上边距：p:first-of-type { margin-top: 0; }
• 避免 margin: 0 auto 这种写法——它把左右设为 auto，上下为 0，但实际中常漏掉单位或写错顺序，导致意外折叠
• 富文本编辑器输出的 <p style="margin:0"></p> 会覆盖样式，必要时得加 p[style] { margin: 1.2em 0 !important; }

text-indent 和 line-height 别和 margin 搞混

缩进、行内疏密、段间空隙，三件事三条路：首行缩进用 text-indent: 2em，段内行距用 line-height: 1.6（无单位），段与段之间只动 margin。

• 用 padding-left 代替 text-indent？整段左移，破坏两端对齐，小屏易溢出
• 给 <span></span> 或 <strong></strong> 设 margin？无效——内联元素不响应 margin 上下值
• 全局重置时别忘 margin-collapse：相邻 p 的上下 margin 会合并，实际间距 ≠ 两倍 margin 值

真正要调的从来就两个值：line-height 管一行字的高度，margin 管两段之间的呼吸感。其他任何试图用 br、空 p、padding 或 vertical-align 替代的方案，都会在换字体、切屏幕、读屏器环境下暴露问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！