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

为什么 `` 不能设 height，但 `

` 可以

因为 `` 是内联元素，默认 display: inline，其盒模型不支持垂直方向的尺寸控制；而 `

` 是块级元素，默认 display: block，width/height/margin/padding 全部生效。

常见错误现象：给 `` 写了 height: 40px 却没变化，或加了 margin-top: 20px 发现上边距“不起作用”——其实它起作用了，只是不影响行高和周围布局。

• 内联元素的 padding-top/padding-bottom 会撑开背景和边框，但不会推开相邻行；margin-top/margin-bottom 完全无效（浏览器忽略）
• line-height 才是控制内联元素垂直空间的关键，它影响整行的基线位置
• 如果真需要尺寸控制，别硬调 height，改用 display: inline-block 或包裹一层 div

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

不是靠“看起来像不像容器”判断，而是看规范定义。浏览器内置了默认 display 值，比如：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 块级标签：div、p、h1–h6、ul、ol、li、section、article、header、footer
• 内联标签：span、a、strong、em、img、input、button（注意：input 和 button 是“替换型内联元素”，可设宽高）
• 例外：a 在 HTML5 中允许包含块级元素（如 div），但仅限于语义合理场景（如整个卡片是链接），且需确保无障碍可用性

用 CSS 强制切换 display 模式时要注意什么

display: block 和 display: inline 能强行改变渲染行为，但不改变语义，也不解决嵌套合法性问题。

• 把 span 设为 display: block 后，它视觉上变块级了，但依然不能合法地直接放在 p 里（HTML 规范禁止块级元素嵌套在 p 中）
• display: inline-block 是折中方案：保留内联流位置（不换行），又支持宽高/上下 padding/margin —— 适合按钮、图标、导航项等
• 现代布局中，display: flex 或 display: grid 的父容器必须是块级（即 display 值不能是 inline），否则子元素无法按 flex/grid 规则排列

实际开发中最容易被忽略的结构陷阱

语义错位比样式错位更难调试。比如用 div 包裹单个词强调，或用 span 做整段布局容器——这些写法可能“看起来正常”，但会破坏可访问性、SEO 和维护性。

• p 标签里不能放 div，哪怕你加了 display: inline；浏览器会自动闭合 p，导致 DOM 结构意外断裂
• img 是内联元素，但它是“可替换元素”，所以能设 width/height；而普通内联元素（如 span）设了也没用
• 当不确定该用哪个时，优先问：这个内容是“结构分区”还是“文本修饰”？前者选块级语义标签（section、aside），后者选内联语义标签（strong、time）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！