block、inline、inline-block三者的区别

block是块级元素，通常是单独的一部分；inline是内联元素，通常成堆存在；inline-block

使用到内联元素span时通常设置display为inline-block,而设置其他元素，比如p或者div等块级元素时会设置为block，那究竟这三者有什么不同？
下面以实例介绍一下

<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>

.box1{
    width: 100px;
    height: 100px;
    background-color: red;
    display: block;
}
.box2{
    width: 90px;
    height: 200px;
    background-color: yellow;
    display: inline;
}
.box3{
    width: 160px;
    height: 40px;
    background-color: blue;
    display: inline-block;
}
.box4{
    width: 200px;
    height: 300px;
    background-color: green;
    display: block;
}

有4个大小不一的盒子，分别设置不同的display，效果如下

可以直观地看到，设置为block时，盒子占了一行的空间，右边没有盒子分布，并且设置width和height可以生效，这是因为block是块级元素，它会给当前所在的div后边添加无数个</br>标签，直到这一行被占满了；
而inline是把当前元素设置为内联元素，也称行内元素，从左到右一个接一个的排列，设置width和height都不生效；inline-block也是和inline一样的效果，所以两个盒子在一行显示，但是不同的是，inline-block对width和height生效，这一点要注意。

下面再说一下margin和padding
分别给每一个盒子设置margin和padding
block：
发现，block对margin和padding都是生效的。

.box1{
    width: 100px;
    height: 160px;
    margin: 10px 0 300px 100px;
    padding: 5px 10px 15px 20px;
    background-color: red;
    display: block;
}

inline：
inline对于margin是生效的，对于padding也是生效的

.box2{
    width: 90px;
    height: 200px;
    margin: 100px 0 3000px 240px;
    padding: 5px 10px 15px 20px;
    background-color: black;
    display: inline;
}

inline-block：
inline-block对于margin是生效的，对于padding也是生效的，和inline是一样的效果。

.box3{
    width: 160px;
    height: 40px;
    margin: 30px 100px 100px 290px;
    padding: 5px 10px 50px 70px;
    background-color: blue;
    display: inline-block;
}

看到这里，基本上对于block、inline和inline-block的区别有大概了，下面我放一个表，直观地展示他们的区别

	block	inline	inline-block
width	生效	不生效	生效
height	生效	不生效	生效
margin	生效	生效	生效
padding	生效	生效	生效