p标签不能嵌套块级元素（如div、h2），浏览器会静默闭合p并移出块级元素，导致DOM结构变为<p></p><div>...</div><p></p>，使CSS选择器失效、JS查询失败、样式错乱；它只允许嵌套行内元素（如a、strong、img等）。
直接说结论：p 标签不能嵌套块级元素，但可以嵌套行内元素；它的默认 margin 是样式控制的关键起点，不是“空白”本身。
为什么 p 里写 div 或 h2 会失效
浏览器解析时会自动「修复」非法嵌套：遇到 <p></p>
<div>...</div>
<p></p>
<div>...</div>。这不是报错，是静默修正——所以页面看起来「没反应」或结构错乱。-
p的合法子元素只有行内内容：文字、a、strong、em、span、img（作为行内替换元素）等 -
div、section、ul、h1～h6都属于块级元素，禁止直接嵌套在p中 - 想包裹多段内容？用
div或article替代外层容器，内部再放多个p
p 的默认外边距怎么精确控制
浏览器给 p 设了上下 margin（通常约 1em），这个空隙常被误认为是「换行」或「HTML 写法问题」。它本质是 CSS 行为，可覆盖但需注意相邻兄弟元素的 margin 合并（collapse）。
立即学习“前端免费学习笔记（深入）”；
- 重置单个段落：用
p { margin: 0; }或更具体如p.intro { margin-top: 0; margin-bottom: 1rem; } - 避免 margin 合并：给父容器设
padding或border，或用display: flow-root - 批量统一：建议在 CSS 初始化中写
p { margin: 0 0 1rem 0; }，比逐个调整更可控
多行文本省略（…）为什么 p 加了 -webkit-line-clamp 没效果
因为 -webkit-line-clamp 要求元素是块级且必须同时满足三个条件：display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden。而 p 默认是块级，但若被其他样式（比如 display: inline）干扰，或父容器未设固定高度/最大高度，就会失效。
- 最小可用组合：
p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 3.6rem; /* 必须配合，否则可能不截断 */ } - Firefox 不支持
-webkit-前缀，需 fallback：服务端截断、JS 计算字符数、或用line-height × 行数+max-height+overflow: hidden - 不要对
p设置height（会破坏自适应），优先用max-height
CSS 优先级冲突时，p 样式为什么总被覆盖
常见于框架（如 Bootstrap）或重置样式表（reset.css）中全局定义了 p { margin: 0 0 1rem; }，而你写的类选择器（如 .content p）权重不够，或写在了前面。
- 检查 DevTools 中 Computed 标签页，看哪条规则生效、被哪条覆盖
- 提高权重：用
p.content（标签+类）比单独.content p更高；或加!important（仅调试用，上线前应重构） - 避免行内样式（
style="..."）滥用——它优先级最高，但无法复用、难维护
真正麻烦的从来不是「怎么写」，而是「为什么写了没用」——p 的嵌套限制和 margin 合并，是多数人查不到原因就放弃调试的两个点。
