<div> 和 <span> 是 HTML 中最常用的两个通用容器标签，它们最本质的区别在于默认的显示类型（Display Type）不同：

• <div> 是块级元素 (Block-level element)
• <span> 是行内元素 (Inline element)

以下是它们在布局、样式和用途上的详细对比：

1. 换行行为 (最直观的区别)

• <div> (Block): 独占一行。它会自动在前后创建换行符。即使你设置了很小的宽度，它右边的空间也会被保留，后续元素会被挤到下一行。
• <span> (Inline): 不换行。它会和其他行内元素（如文字、<a> 标签）并排显示在同一行，直到一行排满才会折行。

2. 宽高设置 (CSS 盒模型)

• <div>:
  • 可以设置 width (宽度) 和 height (高度)。
  • 如果没有设置宽度，默认占满父容器的 100% 宽度。
• <span>:
  • 不可以设置 width 和 height (设置了也无效)。
  • 它的宽高完全由其内容（文字或图片）撑开。

3. Margin 和 Padding (边距)

• <div>:
  • margin 和 padding 的四个方向（上、下、左、右）都完全有效，并且会推开周围的元素。
• <span>:
  • 水平方向 (左、右) 的 margin 和 padding 是有效的。
  • 垂直方向 (上、下) 的 margin 无效；padding 虽然会有背景色效果，但不会推开上下的元素（会发生视觉重叠），不占据文档流的垂直空间。

4. 包含关系 (嵌套规则)

• <div>: 可以包含其他的 <div>、<span>、<p>、<h1> 等几乎所有 HTML 元素。通常用于搭建网页的大框架。
• <span>: 通常只用来包含文字或其他行内元素（如 <a>, <strong>, <em>）。一般不建议在 <span> 里放 <div> 或 <p>。

代码示例

<!-- div 示例 -->
<div style="background-color: lightblue;">我是 div 1</div>
<div style="background-color: lightgreen;">我是 div 2</div>
<!-- 结果：这两个 div 会分两行显示 -->

<hr>

<!-- span 示例 -->
<span style="background-color: yellow;">我是 span 1</span>
<span style="background-color: pink;">我是 span 2</span>
<!-- 结果：这两个 span 会在同一行显示，紧挨着 -->

形象的比喻

• <div> 就像一个“纸箱子”：用来装东西，不管装多少，箱子本身都要占一块独立的地方，通常用来划分网页的区域（头部、侧边栏、正文区）。
• <span> 就像一支“荧光笔”：用来标记文本中的某一部分。比如你想把一段话里的某两个字变成红色，你就用 <span> 包裹这两个字，然后加样式。

特殊情况：如何改变它们的行为？

通过 CSS 的 display 属性，你可以改变它们的默认行为：

1. 让 <span> 像 <div> 一样：
   设置 span { display: block; }，此时 <span> 就可以设置宽高并独占一行了。
2. 让 <div> 像 <span> 一样：
   设置 div { display: inline; }，此时 <div> 就不会换行了。
3. 折中方案 (常用)：
   设置 display: inline-block;。这样元素既可以设置宽高（像 div），又可以和其他元素并排显示（像 span）。

总结表