HTML文档结构中的内联元素和块级元素区别

span设height无效因其默认display:inline，垂直方向盒模型属性被忽略；div可设height因默认display:block，宽高及上下边距均生效。

为什么 span 设了 height 没反应，而 div 可以

因为 span 默认是 display: inline，垂直方向的盒模型属性（height、margin-top、margin-bottom）被浏览器忽略；div 默认是 display: block，所有尺寸和边距都生效。

常见错误现象：span 加了 height: 40px 或 margin-top: 20px，页面毫无变化——不是 CSS 写错了，是它本就不支持这些值。

• padding-top/padding-bottom 在 span 上会渲染背景和边框，但不会推挤相邻行
• line-height 才是控制 span 垂直空间的实际手段（影响整行基线）
• 真要设高宽或上下边距，别硬扛，直接用 display: inline-block 或外层套 div

a 标签能包 div 吗？什么时候能、什么时候不能

HTML5 允许 a 包含块级元素（比如 div、h2、p），但前提是语义合理且无障碍可用。

典型可用场景：整个卡片作为点击区域，内部含标题、描述、图片；此时 a 是唯一交互入口，且包裹内容逻辑上是一个“可点击单元”。

立即学习“前端免费学习笔记（深入）”；

• 不能只为了布局方便强行把多个 div 塞进 a，尤其当里面还有表单控件（如 input、button）时，会破坏语义和键盘导航
• 屏幕阅读器会把整个包裹内容读作一条链接，若内容冗长或结构混乱，反而降低可访问性
• 部分旧版浏览器或严格校验工具（如 W3C validator 的 HTML4 模式）仍会报错

哪些标签天生是块级，哪些天生是内联

不是看“长得像不像容器”，而是由 HTML 规范定义的默认 display 值决定。

块级标签（可设宽高、上下边距，独占一行）：div、p、h1–h6、ul、ol、li、section、article、header、footer

内联标签（不换行，宽高无效，水平边距有效）：span、a、strong、em、img、input、button

注意：img 和 input 是“替换型内联元素”，虽属内联，但允许设 width/height —— 这是特例，不是通则。

用 display 切换显示模式时容易踩的坑

用 display: block 把 span 变成块级，或用 display: inline 把 div 变成内联，看似简单，但实际影响远不止换行。

• display: inline 后的 div 会丢失 width/height，且 vertical-align 开始起作用（可能意外对齐）
• display: inline-block 是折中方案，但默认有空白间隙（来自 HTML 源码换行/空格），需用 font-size: 0 或注释删空格来消除
• display: flex 或 display: grid 会重置子元素的默认显示行为，此时再设 display: inline 可能被忽略

最常被忽略的是：一旦改了 display，元素就脱离了原始语义流，某些 CSS 属性（如 float、position: relative 的基准）的行为也会随之变化。改之前，先想清楚它在 DOM 流中的角色是否还成立。