p标签内放div会失效，因html解析器强制闭合p并移出div，真实dom变为...，导致document.queryselector('p div')返回null、css选择器p > div不匹配；p仅允许phrasing content（如、），禁止嵌套任何flow content（如、、）。
为什么p标签里放div会直接失效
不是样式没生效，是浏览器压根不认这个结构。HTML解析器遇到<p></p>
<div>...</div>
<div>前自动闭合<code><p></p>，真实DOM变成<p></p>
<div>...</div>。结果就是：document.querySelector('p div')永远返回null，p > div这类CSS选择器完全不匹配。
-
<p></p>只允许 phrasing content：比如<em></em>、<a></a>、<img>、<time></time>，连<button></button>都得是内联形态 - 禁止放入任何 flow content：包括
<div>、<code><section></section>、<ul></ul>、<h2></h2>、<form></form> - 想实现“段落后跟一个区块”，正确写法是分开：
<p>文字</p> <div class="block-after">内容</div> - 只设
margin-bottom，别碰margin-top，避免首段顶部意外留白 - 父容器加
overflow: hidden或display: flow-root可阻止外边距合并 -
line-height只影响段落内部行高，和段间距无关；设line-height: 1.2不会让两段离得更近 - 移动端旧WebView可能忽略
em，关键布局建议兜底写margin-bottom: 16px - 优先用
<article></article>或<section></section>作为容器，它们允许包含<h2></h2>、<p></p>、<ul></ul>、<div>等混合内容 <li>若只是视觉分组，用<code><div>加语义类名（如<code>class="prose"），再配CSS控制排版 - 富文本场景下，服务端或编辑器应把回车转为
<p></p>，而非把整块HTML塞进<p></p>里 - 检查源码中是否出现连续空
<p></p>——这是语义失控的典型信号 - 右键元素 → “Edit as HTML”，临时修改结构，观察实时变化比读代码更直观
- 用W3C Validator校验，它会明确报出
Element div not allowed as child of element p这类错误 - VS Code装
Auto Close Tag和Highlight Matching Tag，光标停在<div>上能立刻看到对应<code>
段落间距调不准？别碰line-height
改了margin-bottom还挤在一起，是因为相邻<p></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>的垂直外边距会合并（collapse）——不是相加，而是取较大值。设两个p都为margin-bottom: 20px，实际间距仍是20px。
用什么替代p标签包裹复杂内容
当需要“一段文字+嵌套标题+列表+图片”这种组合时，<p></p>已超出语义能力。强行塞进去只会触发浏览器纠错，导致DOM断裂。
怎么快速验证嵌套是否合法
别只看源码缩进，浏览器开发者工具里的Elements面板显示的是真实DOM，它才是唯一可信依据。
