<div> 与 <span> 是两个容器元素。简单地说，就是它们不包含任何含义，没有默认的样式，不对内容和布局有任何影响，仅仅用来分组管理我们的元素。

div 与 span 的区别在于， div 是块级元素，而 span 是行内元素，参考块级元素与行内元素章节。

<div>三眼鸭</div>
<div>三眼牛</div>
<span>三眼鸡</span>
<span>三眼鸭</span>

$$demo

<div>三眼鸭</div> <div>三眼牛</div> <span>三眼鸡</span> <span>三眼鸭</span>

$$

块级元素与行内元素一个重要的区别是，块级元素会单独作为一行，而行内元素可以与其他行内元素共处一行。

因此以上示例中 <div> 的内容单独作为一行，而 <span> 中的内容则共处一行。

---

练习

1. 以下的 <span> 中的内容显示时是单独一行吗？为什么？

<div>div 元素1</div>
<span>span 元素1</span>
<div>div 元素2</div> 
<span>span 元素2</span>

$$answer

是的，因为行内元素只能与行内元素共处一行。

$$

2. 给以下的代码添加 <div> 元素，达到示例的效果。

<span>你好</span>
<span>世界</span>
<span>你好</span>
<span>中国</span>

示例效果：

$$demo

<div> <span>你好</span> <span>世界</span> </div> <div> <span>你好</span> <span>中国</span> </div>

$$

$$answer

<div>
    <span>你好</span>
    <span>世界</span>
</div>
<div>
    <span>你好</span>
    <span>中国</span>
</div>

$$