HTML中div与span有何本质差异及其适用环境？

本文共计989个文字，预计阅读时间需要4分钟。

避免使用 div 和 span 做布局容器——这是最常见的语义和渲染双峰问题。

为什么 div 会强制换行而 span 不会

根本原因是浏览器默认的 display 值不同：div 是 display: block，span 是 display: inline。块级元素天然独占一行、可设宽高、垂直方向外边距生效；行内元素则“贴着走”，宽度由内容撑开，margin-top/bottom 和 height 默认不产生布局效果。

常见错误现象：

• 给 span 设置 width: 200px 却没反应 → 必须先加 display: inline-block 或 block
• 两个 span 之间加了 margin-bottom: 20px，但垂直间距没变 → 行内元素的上下外边距被忽略
• 把 div 塞进 p 标签里导致 HTML 验证失败 → p 只允许内联子元素，div 是块级，违反嵌套规则

div 和 span 的合法嵌套关系

HTML 规范对嵌套有硬性限制，不是“能显示就行”。