前端开发同学都知道，在html里面，元素分为两种基本类型：1.块元素 2. 内联元素；然而内联元素是没有宽和高属性的，在我们布局页面的过程中，如果需要让块元素水平排列，我们除了使用浮动(float)、弹性盒(flex)之外，我们还可以通过使用display:inline-block来让一个块元素保持自身的宽高属性并且实现水平排列。
1.display:inline-block和float有什么区别呢？
- 首先浮动float的元素会脱离文档流，后面的元素会占据他原来的位置。可以通过清除浮动的方法来让元素显示在正常的位置。
- 浮动的元素由于不占据原来的位置，有可能会造成父元素的高度塌陷、高度计算存在偏差等问题。
- display:inline-block不会脱离文档流，并可以让块元素水平排列显示。
2.display:inline-block带来的问题
一、inline-block的元素放在一起会产生间隙
我们看到并排的inline-block之间存在间隙
原因：
浏览器会处理内联元素之间的空白符(空格/换行)在字体大小不为0的情况下产生了“幽灵空白节点”
解决方法：
- 包裹inline-block的父元素指定font-size:0
- 标签不换行
二、inline-block元素放在一起垂直方向对齐问题
- 指定高度的inline-block 空元素底部对齐
二、未指定高度的inline-block元素并且自元素不包含文本的情况下，会根据自身自元素的高度与周围的inline-block垂直居中对齐
三、内部包含文本、图片的inline-block会与周围inline-block元素产生垂直方向偏移
解决方法
- inline-block父元素指定vertical-align属性进行对齐控制
最后，希望能够帮助到有需要的前端同学。
