我们深入研究一下不同CSS显示类型的特点，再探讨一下 html 元素嵌套的规则。
我们已经熟知：html 元素分为块元素和行内元素两种类型。在浏览器中，每种类型都有默认的显示特点。通过给元素设置 display 样式属性，来改变他们的显示方式。
不同的显示类型，可定义的样式也有很多区别，我们来做一些实验。
这里我准备好了一个 html，制作了两个容器，里面分别装了两个行内元素 span 和两个块元素 div。定义了一些基本的样式。效果是这样的。
HTML
<body>
<div class="box1">
<span>span1</span>
<span>span2</span>
</div>
<div class="box2">
<div>div1</div>
<div>div2</div>
</div>
</body>CSS
* {
margin: 0;
padding: 0;
}
.box1, .box2 {
width: 300px;
height: 300px;
background-color: brown;
margin: 20px;
padding: 0;
}
.box1 span {
display: inline;
background-color: yellow;
}
.box2 div {
display: block;
background-color: yellow;
}我们看，box1 里的两个 span 元素，display 样式属性值为 inline，这也是 span 元素的默认显示值。给两个 span 元素添加样式 width: 100px，height: 100px，border: 1px solid blue，padding: 10px，margin: 100px 10px;
CSS
.box1 span {
display: inline;
background-color: yellow;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 10px;
margin: 100px 10px;
}在浏览器里看一下效果，两个 span 元素的大小并没有发生变化，内填充四个方向均有效，蓝色边框也填上去了。外边距左右方向生效了，上下方向没有生效。
由此可以得出结论：第一、行内元素不能设置宽高样式。第二、行内元素可以设置边框线样式。第三、行内元素可以设置内填充样式。第四、行内元素可以设置左右方向的外边距样式。
回到 CSS 代码，给 box2 里的两个 div 添加样式：width: 100px，height: 100px，border: 1px solid blue，padding: 10px，margin: 10px。
CSS
.box2 div {
display: block;
background-color: yellow;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 10px;
margin: 10px;
}看一下效果：两个 div 的宽高、边框、内填充以及外边距样式全部生效了。
这里你可能会喊：第一个 div 容器上边距怎么是 0，为什么不是 10px？下边距怎么才 10px，为什么不是 20px？那你一定是忘记了 margin 塌陷的问题。现在想起来了吗？
由此也可以得出结论：给块元素设置宽高、边框线、内填充、外边距样式，都是有效的。
块元素虽然可以设置盒模型的全部样式，但是每个块元素会独占一行，能否像行内元素一样，在一行上排列呢？
display: inline-block 样式可以满足我们的愿望。inline-block，顾名思义，具备 inline 和 block 两种显示类型的特点。比如，既可以给元素设置宽高，又可以让它们在一行上显示。我们来验证一下。
复制一个盒子，修改类名为 box3。给 box3 也声明基本样式。复制 box2 的样式，修改选择器为 .box3 div，修改 display 属性值为 inline-block。
看一下效果，两个 div 在一行上显示，同时 margin 塌陷的问题也不存在了！
这里需要声明一下，设置一个元素的 display 属性只能改变该元素的显示方式，而不能真正的改变 html 元素的类型。比如，一个添加 display: inline 的块级元素里面，还是不允许在它的内部有其他块级元素的。
这就引申出一个话题：在搭建网页结构时，虽然有很多 html 元素可以使用，但还是要遵循一些嵌套规则的。我们列举一下。
规则一，块元素可以包含行内元素或某些块元素，但行内元素却不能包含块元素，它只能包含其它的行内元素。比如这三组代码，第一组和第二组合规，第三组不合规。
HTML
<div><h1></h1><p></p></div>
<a href=”#”><span></span></a>
<span><div></div></span>规则二，块元素不能放在 p 元素里面。比如这两组代码都是不合规的。
HTML
<p><ol><li></li></ol></p>
<p><div></div></p>规则三，有几个特殊的块级元素只能包含行内元素，不能再包含块元素，这几个特殊的元素是：h1、h2、h3、h4、h5、h6、p、dt。比如这两组代码都是不合规的。
HTML
<h1><p></p></h1>
<dt><div></div></dt>规则四，块级元素一般与块级元素并列、行内元素一般与行内元素并列。比如这三组代码，第一组和第二组合规，第三组不合规。
HTML
<div><h2></h2><p></p></div>
<div><a href=”#”></a><span></span></div>
<div><h2></h2><span></span></div>本篇文章配套教程链接：https://www.bilibili.com/vide...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。