line-height 是控制行距的唯一正确属性，应使用无单位数值；段落间距用 margin-bottom；外边距折叠是规范行为；避免滥用 p 标签破坏语义。
line-height 是控制段落内部行距的唯一正解
想调“文字行与行之间的距离”，必须用 line-height，不是 margin，也不是 padding。后者改的是段落盒子整体位置或内边空间，和行内基线对齐无关。
line-height 接受数字（如 1.6）、单位值（如 24px）或百分比（如 160%）。推荐用无单位数字——它基于当前 font-size 计算，缩放/响应式时自动适配，且可被子元素继承。
- 设
p { font-size: 16px; line-height: 1.6; }→ 实际行高 = 25.6px - 设
p { line-height: 24px; }→ 无论字体变大变小，行高永远卡死在 24px，易导致行间挤压或空洞 - 避免
line-height: normal—— 浏览器实现不一，Chrome 和 Safari 渲染结果可能差 2–3px
margin-bottom 是调整段落之间间距的合理选择
想控制“一段文字和下一段之间的空白”，该用 margin-bottom，而不是 margin-top。原因很实际：你几乎不会单独控制某一段的顶部空隙，但经常需要统一控制段落底部留白，比如列表、文章正文、卡片描述等场景。
全局写 p { margin-bottom: 1.2em; } 比每个 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 手动加 class 更可持续；但要注意：如果 p 是容器第一个子元素，它的 margin-top 会和父容器发生外边距折叠（margin collapse），导致顶部空白消失。
- 只设
margin-bottom，不碰margin-top，能规避大部分折叠干扰 - 若必须保留首段顶部空隙，给父容器加
padding-top，而非给首段加margin-top - 用
em或rem单位，让间距随字号缩放，比固定px更健壮
margin 折叠不是 bug，是 CSS 规范定义的行为
两个相邻 p 各设 margin-bottom: 20px 和 margin-top: 20px，实际间距只有 20px，不是 40px——这不是渲染错误，而是规范明确要求的“垂直外边距合并”（collapsing margins）。
折叠触发条件很具体：两个块级元素在文档流中垂直毗邻、中间无 border/padding/content 分隔。常见于：p + p、h2 + p、父容器与首个子 p。
- 调试时发现“第一段没顶边距”“两段之间空隙比预期小”，先查是否发生了折叠
- 不想折叠？打断毗邻关系即可：给父容器加
padding-top: 1px，或border-top: 1px solid transparent - 别用
* { margin: 0; }全局清零——表单label、button、ul的默认间距全乱，后续补救成本更高
真正容易被忽略的细节：语义与样式的耦合风险
很多项目把 p 当成“视觉换行块”滥用，比如在卡片里塞副标题+描述，硬套两个 p，再靠 margin 控制间距。这看似省事，实则埋了三颗雷：
- 屏幕阅读器仍按段落语义朗读，两个
p会被读成两条独立陈述，破坏信息层级 - 一旦设计要求“副标题和描述之间不留空”，就得额外写样式覆盖，而原本用
span+display: block更轻量 -
p的默认margin在组件库中常被重置，你的业务代码可能突然失效
遇到非典型文本结构，优先考虑语义准确的标签组合（如 h3 + div），再用 CSS 控制视觉表现。样式可以妥协，语义不该将就。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
