块级标签不能直接嵌套在<p>里，因<p>只允许短语级内容；浏览器会静默修正为先闭合<p>再将块级元素置外；display属性可改变视觉表现但不改变HTML内容模型约束。
块级标签为什么不能直接嵌套在 <p> 里
HTML 解析器会静默修正这种结构错误，而不是报错或警告。<p> 的内容模型是 phrasing content（短语级内容），只允许文本、<em>、<strong>、<a>、<img> 等行内元素。一旦你写 <p><div>xxx</div></p>，浏览器会自动闭合 <p>，再把 <div> 插到外面——DOM 结构和你写的完全不一致。
常见错误现象：
- 预期段落内有个容器，结果容器跑到了段落下一行
-
<h2>放进<p>后，标题样式失效、语义丢失 - 用
<span>包裹大段内容再设display: block，看似“绕过限制”，但实际仍违反规范，可能影响可访问性与 SEO
<img> 和 <input> 明明是行内标签，为什么能设 width 和 height
因为它们属于 replaced element（可替换元素）：渲染时由外部资源（如图片文件、表单控件引擎）决定内容，浏览器为其预留盒空间，并允许 CSS 控制尺寸。这不是“行内元素能设宽高”的例外，而是特例规则。
关键区别：
立即学习“前端免费学习笔记（深入）”；
-
<span>是纯行内元素，设width: 100px完全无效 -
<img>设width会缩放图像本身，不是撑开一个空盒子 -
<input type="text">的宽高控制的是控件 UI 尺寸，不是文本行高 - 把
<img>设为display: block后，margin: auto居中才生效；但它的行内盒本质没变，vertical-align依然起作用（比如和文字混排时）
vertical-align 只对三类元素有效
这个属性常被误用：给 <div> 或 <p> 加 vertical-align: middle 永远无效。它只作用于：
- 行内盒（
<span>、<em>、<img>等默认 display 为 inline 的元素） - 表格单元格（
<td>、<th>） -
display: inline-block元素（如<button>、显式设了 inline-block 的<div>）
典型使用场景：
- 图标
<img>与文字垂直居中：给图标加vertical-align: middle - 多个
<input>和<label>对齐：统一设vertical-align: baseline或middle - 避免
inline-block元素间的空白缝隙干扰对齐：改用vertical-align: top+ 字体大小归零等方案
用 display 改变布局行为，但改不了 HTML 内容模型约束
把 <span> 设成 display: block，它就能换行、设高宽、接受上下 margin——但依然不能作为 <h1> 的子元素，因为 <h1> 的内容模型只接受 phrasing content，而 <span> 即使视觉上像块，语义上仍是行内元素。
容易踩的坑：
- 以为
display: block能让<a>套整个卡片就“合法”了——其实<a>里放<div>在 HTML5 中已允许，但放<h1>仍不行（除非用<hgroup>或语义重构） - 用
<div>做按钮并设display: inline，虽然视觉并排，但它仍能包含<p>，而真实按钮（<button>）是行内块，内容模型更严格 - 依赖 CSS 改变 display 来“修复”嵌套错误，却忽略 screen reader 和搜索引擎仍按原始 HTML 结构解析
真正决定能否嵌套的，是每个标签在 HTML 规范里的 content model，不是你后来加的 CSS。
