浏览器会“自作主张”闭合p标签，因HTML规范禁止p内嵌div等块级元素，解析器强制修复为<p></p><div>xxx</div><p></p>，导致JS/CSS失效。
为什么
里放
这不是样式失效，而是HTML解析器在执行容错修复。遇到 <p><div>xxx</div></p>，浏览器会立刻终止当前 p，插入一个隐式闭合标签，实际生成的 DOM 是：<p></p><div>xxx</div><p></p>。结果就是：JS 查不到 p > div，CSS 选择器完全不匹配，连 document.querySelector('p').children 都是空的。
根本原因在于 HTML 规范中 p 的内容模型（Permitted content）只允许 phrasing content：即 <strong>、<em>、<a>、<img>、<time>、<button> 这类行内级元素，明确排除 div、section、ul、h2 等 flow content。
- 别指望加
display: block或contenteditable能绕过——这是解析阶段的语法校验，不是渲染层控制 - 富文本编辑器输出的 HTML 若含
p套div，说明它没做语义清洗，要后置处理或换库 - 用浏览器 Elements 面板右键“Edit as HTML”临时改写，能实时看到解析器怎么“掰正”你的结构
想让段落后面紧跟区块布局，该怎么写才合法
语义上，“段落之后有一块独立内容”不是 p 的职责，而是文档流中下一个兄弟节点的事。正确做法是把 div 拿出来，和 p 并列：
<p>这是第一段正文。</p> <div class="card"> <h3>标题</h3> <p>卡片内部可以有自己的段落</p> </div> <p>这是第二段正文。</p>
这种结构既符合规范，又便于 CSS 控制间距（比如给 .card 加 margin-top: 1.5em），还能让屏幕阅读器按逻辑顺序朗读。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 如果必须视觉上“紧贴”，用
margin-bottom控制p下间距，再用margin-top微调div上间距，但注意相邻外边距折叠问题 - 避免用
<section><p>...</p><div>...</div></section>来“包住”——section不解决p内嵌限制，只是多套一层容器 - 对表单、提示框等高频场景，可封装成自定义组件（如
<alert><p>...</p></alert>），用 JS 或构建时展开为合法结构
富文本粘贴进来的
真实项目里，CMS 或用户粘贴常带非法嵌套。手动改不现实，得靠脚本清洗。核心逻辑是：定位所有 p 元素，检查其直接子节点是否含非法块级元素，若有，则将其剪切到 p 后作为兄弟节点插入。
简版 DOM 清洗示例（运行在页面加载后）：
document.querySelectorAll('p').forEach(p => {
Array.from(p.children).forEach(child => {
if (['DIV', 'SECTION', 'UL', 'OL', 'TABLE', 'FORM', 'H1', 'H2', 'H3'].includes(child.tagName)) {
p.parentNode.insertBefore(child, p.nextSibling);
}
});
});- 该脚本只处理直接子元素，不影响
p > strong > span这类合法嵌套 - 生产环境建议用 MutationObserver 监听动态插入的内容，或在服务端解析 HTML 时用类似 cheerio 的库预处理
- 别用正则替换 HTML 字符串——
<p><div>可能跨行、含属性、被注释包裹，极易误杀
text-indent + margin-bottom 组合才是段落排版安全区
很多团队想复刻 Word 式首行缩进+段间距，结果乱套，是因为混用了控制维度：text-indent 管首行缩进，margin-bottom 管段落间空白，二者正交、互不干扰。设 line-height 只影响段内行距，和段距无关。
推荐最小安全配置：
p {
text-indent: 2em;
margin-bottom: 1.4em;
margin-top: 0; /* 关键：禁掉默认 margin-top，防顶部空隙 */
}- 移动端旧 WebView 对
em计算不稳定，关键位置建议兜底写margin-bottom: 16px - 用
rem时务必确认根字体大小稳定，否则html { font-size: 16px; }要显式声明 - 若需兼容 IE8，
text-indent值别用百分比（IE8 不支持text-indent: 10%）
最易被忽略的是：段落语义完整性。两个逻辑上属于同一段的文字，硬拆成两个 p，哪怕加了 margin: 0，也会破坏可访问性与 SEO——屏幕阅读器会把它们读成两段独立内容，搜索引擎可能判定为内容割裂。
