inline-block 的特性
- 既有 inline 的特性，不占据一整行，宽度由内容撑开，多个元素可以并排排列。
- 又有 block 的特性，可以设置 width 、height 、margin、 border、 padding 等盒模型的参数。
代码
HTML:
<div class="nav">
<span class="box">hellow</span>
<span class="box">jirengu</span>
</div>
CSS
.nav{
background-color: yellow;
text-align: center;
}
.box{
display: inline-block;
margin: 20px 0;
border: 1px solid red;
padding: 10px;
}
Paste_Image.png
去除缝隙
我们发现在两个并排的 inline-block 中间会有一个缝隙，这是因为两个span中间有一些空格和回车，浏览器会把它们合并解读成一个空白字符，如果想去除缝隙，我们可以这样做：
- 在HTML中把两个span粘连着写，没有空格和回车，HTML代码
<div class="nav">
<span class="box">hellow</span><span class="box">jirengu</span>
</div>
效果为
Paste_Image.png
这种方法的优点是很方便，缺点是代码太丑了，很杂乱，对于追求整洁美观的程序猿来说是不可容忍的，那么，我们就用另一种方法。
- 在CSS中对父容器设置字体大小为0，对子元素再设置字体大小为正常，CSS代码：
.nav{
background-color: yellow;
text-align: center;
font-size: 0;
}
.box{
display: inline-block;
margin: 20px 0;
border: 1px solid red;
padding: 10px;
font-size: 1rem;
}
效果为
Paste_Image.png
对齐方式
当 inline-block 的高度不一样的时候，就需要我们去设置对齐方式；
- 顶端对齐：
vertical-align: top; - 中部对齐：
vertical-align: middle; - 底部对齐：
vertical-align: bottom;
.box{
display: inline-block;
margin: 20px 0;
border: 1px solid red;
padding: 10px;
font-size: 1rem;
vertical-align: top;
}
