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

却能立竿见影。这并非代码错误，而是CSS背后一条“看不见的规则”在发挥作用。

问题的根源在于CSS的基本规则：元素的默认display属性决定了它是否响应垂直方向的盒模型属性。下面从最基础的规则入手，梳理那些容易踩坑的细节。

为何span设置height无效而div可以

核心原因是：span默认的display值为inline，浏览器会直接忽略其垂直方向的盒模型属性，包括height、margin-top和margin-bottom。而div的默认display为block，所有尺寸和边距属性自然生效。

因此，当为span添加height: 40px或margin-top: 20px却看不到任何效果时，不必怀疑代码写错——这些属性本身就不支持内联元素。

• padding-top和padding-bottom在span上虽然能渲染背景和边框，但不会影响相邻行的垂直空间——它只是“视觉上变高”，实际并不占据垂直布局。
• 真正控制span垂直空间的是line-height，它影响整行的基线。
• 如果必须设置宽高或上下边距，不应强行使用内联元素，而是改用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将变为块级，或通过display: inline将