p标签内不能嵌套任何块级元素，包括display为inline-block的元素；浏览器会自动修正DOM结构，导致语义丢失、样式失效和JS操作异常。
p 标签里不能嵌套块级元素，包括 display: inline-block 的元素——只要该元素的 display 计算值是 block、flex、grid、table 等块级类型，浏览器就会自动修正 DOM，导致结构断裂和样式失效。
浏览器会自动“修复”非法嵌套，结果不可控
HTML 规范明确禁止 p 内含块级内容。一旦出现，比如：
<p>文字<div style="display:inline-block">内联块</div>后续文字</p>
浏览器解析时不会报错，但会立即闭合 p，再把 div 提到外面，最后补一个新 p：
<p>文字</p> <div style="display:inline-block">内联块</div> <p>后续文字</p>
这意味着：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 你写的 CSS 选择器（如
p > div）永远匹配不到 - 原本想控制的上下文语义（“这段话里包含一个提示框”）完全丢失
- 后续 JS 操作
p的children会拿到意外的空数组或错位节点
真正能塞进 p 的只有行内元素
p 合法子元素仅限于： a、span、strong、em、img（无宽高设为 vertical-align: middle 时）、input（type=text/password 等）等默认 display: inline 的元素。
如果需要视觉上像“内联块”的效果（比如带背景、内边距、不换行），优先用以下方式替代：
- 用
span替代div，再加display: inline-block—— 它仍是行内元素，合法嵌套 - 给
span加类名（如class="badge"），避免污染所有span - 必要时用
display: inline-flex或display: inline-grid，它们仍属行内级别，且被现代浏览器广泛支持
需要块级布局？别硬塞进 p，换容器
当内容逻辑上不是“一段文字”，而是“一段文字 + 一个独立提示区/操作区/图标区”，就说明它已经超出段落语义范围。这时应该：
- 用
div或section作为外层容器，内部放多个p+ 其他块级元素 - 用
figure/figcaption处理图文混排场景 - 用
details/summary实现可折叠的段落附属内容 - 若只是想让多个
p并排，改父容器display: flex，而不是强行让p变成行内
最常被忽略的一点：浏览器对 p 嵌套的“自动修复”不触发任何警告，开发者看到渲染结果正常，就以为写对了——其实 DOM 已被悄悄重写，后续维护或 SSR/SSG 场景下极易出错。
