CSS block、inline和inline-block

block一个占一行，默认宽度100%，可以设置宽高。

inline挨着堆放，直到一行不够再换行，默认宽高被内容撑起，设置宽高不起效果，可以padding和margin。

inline-block在inline的基础上，默认宽高被内容撑起，可以设置宽高。

共同点：全都可以设置margin、padding。

.test1{
  display: block;
  background-color: pink;
}
.test2{
  width: 50px;
  height: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: inline;
  background-color: skyblue;
}
.test3{
  width: 40px;
  height: 30px;
  padding-top: 5px;
  padding-bottom: 10px;
  display: inline-block;
  background-color: gold;
}

<div style="width: 200px; background-color: seashell;">
  <div class="test1">div1</div>
  <div class="test2">div2</div>
  <div class="test3">div3</div>
  <div class="test2">div2</div>
  <div class="test3">div3</div>
  <div class="test2">div2</div>
  <div class="test3">div3</div>
  <div class="test2">div2</div>
  <div class="test3">div3</div>
</div>

 粉色是block、蓝色是inline、金色是inline-block。