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。