块级与行内元素的本质区别在于盒模型参与方式：块级生成块容器并建立BFC，行内生成行内盒并参与line box；vertical-align仅对行内盒、表格单元格及inline-block生效。
块级元素和行内元素的默认布局行为不同
本质区别不在“能不能设宽高”，而在浏览器渲染时的**盒模型参与方式**。块级元素（如 <p>、<div>）默认生成一个**块容器（block container）**，它会建立新的块格式化上下文（BFC），强制换行、垂直堆叠，并接受完整的盒模型控制（margin、padding、width、height 全部生效）。行内元素（如 <span>、<a>）则生成**行内盒（inline box）**，参与当前行的行框（line box）构建，不打断文本流，margin-top 和 margin-bottom 被忽略，width 和 height 也无渲染效果。
嵌套规则背后是内容模型（content model）限制
HTML 规范对每个元素定义了明确的“允许包含什么”的内容模型，不是靠视觉经验判断。比如 <p> 是块级元素，但它的内容模型是“**phrasing content**”（短语级内容），因此不能直接包含 <div> 或 <h2> —— 这会触发 HTML 解析器静默修正（如自动闭合 <p>），而不是报错。而 <div> 的内容模型是“flow content”，可嵌套几乎所有块级和行内元素。这种限制与 display 值无关，是 HTML 结构语义的硬约束。
-
<li>可以包含块级元素（如<div>），因为它的内容模型允许 flow content -
<strong>只能包含 phrasing content（如文本、<em>、<a>），放<p>会破坏 DOM 结构 -
<img>是行内元素，但属于“replaced element”（可替换元素），所以width/height有效 —— 这是特例，不改变其行内盒本质
display 属性能改布局，但改不了语义和解析规则
把 <span> 设成 display: block，它就具备块级布局能力（换行、可设高宽），但它仍是 HTML 中的行内元素，仍受 phrasing content 约束 —— 比如你不能把它作为 <h1> 的子元素（除非规范允许，而实际不允许）。同理，<div> 设为 display: inline 后会同行排列，但它在 DOM 树里还是块级元素，仍可合法包含 <p>。真正影响解析和验证的是 HTML 元素类型本身，不是 CSS 渲染结果。
容易被忽略的关键点：行内元素的 vertical-align 生效，块级元素不生效
这是最常踩坑却极少被讲清的一点：vertical-align 只对**行内盒、表格单元格、inline-block 盒**起作用。给一个 display: block 的 <div> 设置 vertical-align: middle 完全无效。但如果你把一个 <span> 设为 display: inline-block，再配合 vertical-align，就能精确控制它在行内的基线对齐位置 —— 这正是实现“文字旁图标垂直居中”的底层依据。很多开发者调不对对齐，根本原因是没意识到这个属性的生效前提只和盒类型有关，和元素原始标签名无关。
立即学习“前端免费学习笔记（深入）”；
