p标签内不能嵌套div等块级元素，因HTML解析器会自动闭合p标签，导致DOM结构断裂；p仅允许phrasing content，应改用语义正确的相邻结构并用CSS控制间距。
为什么 p 里放 div 后样式全乱了？
不是样式问题，是 HTML 解析器直接重写 DOM：遇到 <p></p> <div></div>，浏览器会自动闭合 p，变成 <p></p><div></div>。结果就是 document.querySelector('p div') 永远返回 null，p > div 这类选择器完全不生效。
根本原因在于 p 只允许嵌套 phrasing content（如 em、strong、a、img、button），禁止任何 flow content（div、ul、h2、section 等）。
- 想实现“段落+区块”结构，应拆成语义正确的组合：
<p>文字</p> <div class="block-after-paragraph">内容</div> - 若必须视觉上紧邻，用 CSS 控制后续兄弟元素的
margin-top: 0，比如p + .block-after-paragraph { margin-top: 0; } - 别试图靠
line-height或padding弥补结构错误——它们解决不了 DOM 层面的断裂
p 标签内行内元素的间距怎么调？
line-height 是唯一影响段落内部行距的属性，它和段落间距离无关。设 line-height: 1.5 表示行高为当前 font-size 的 1.5 倍，数值无单位更健壮；设 line-height: 20px 则固定像素，在缩放或动态字体场景下易出错。
注意：line-height 不控制 em、strong 等行内元素之间的水平间距——那是 letter-spacing 或字体内在字距的事；也不影响它们与周围文字的垂直对齐，那由 vertical-align 决定（默认 baseline）。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 中文排版建议范围：1.4–1.7，过小（如 1.0）会让多行文字挤在一起
- 避免设
line-height: 1，尤其含图标或sup/sub时，基线错位明显 - 如果段内某处需要额外留空（比如地址换行），用
<br>，别靠多个空格或padding
如何精确控制连续 p 标签之间的距离？
浏览器默认给 p 设 margin-top: 1em; margin-bottom: 1em;，但相邻 p 的垂直外边距会合并（margin collapsing）：两个 p 都设 margin-bottom: 20px，实际间距仍是 20px，不是 40px。
真正可控的做法是只设 margin-bottom，并切断合并链：
- 推荐方案：父容器加
overflow: hidden或display: flow-root，触发 BFC 阻止合并 - 替代方案：用 Flex 布局，
display: flex; flex-direction: column; gap: 1.2rem;，此时gap优先级高于margin，且不合并 - 移动端兜底：Android WebView 旧版本可能忽略
em，关键段落建议显式写margin-bottom: 16px - 首段顶部留白？用
:first-child重置：p:first-child { margin-top: 0; }
用 padding 替代 margin 调整段落间距行不行？
不行。给 p 加 padding-top 或 padding-bottom 会撑大元素盒模型，导致背景色、边框、阴影等渲染范围扩大，还可能意外触发滚动条或破坏垂直居中逻辑。
更重要的是：padding 不参与外边距合并，但它也没法替代 margin 的语义作用——段落间距是“段与段之间”的关系，属于外部空间，不是段落自身内容的一部分。
- 如果你发现加了
padding后间距“看起来”变了，大概率是因为它干扰了其他布局（比如父容器高度计算或 flex 对齐） - 调试时打开浏览器开发者工具，勾选“Show layout shifts”，能立刻看出
padding是否在撑开容器 - 真要微调视觉节奏，优先用
margin-bottom+ 媒体查询适配不同屏幕
margin 数值更省时间。 
