css:你知道display:inline-block会带来哪些问题吗？

前端开发同学都知道，在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属性进行对齐控制

最后，希望能够帮助到有需要的前端同学。