inline-block的两个Bug

[yoowinsu]

本文首发在个人博客yoowin.me

1.元素之间的间隙

两个inline-block 元素之间会出现间隙。如下图：

解决方法：

• 第一种：

将父元素的 font-size 设置为0，然后在 inline-block 元素中将 font-size 设置为 14px.

如下图：

• 第二种：

去掉元素之间的空格、回车、tab（弊端就是代码不美观，可读性差，不易维护） 如下图：

2.不同高度的元素无法对齐

两个不同高度的 inline-block 元素无法对齐。如下图：

解决方法：

改变 inline-block 元素的 vertical-align，一般改为 top 或 middle.如下图：

img元素专有的BUG

还有一种现象就是img元素下面无缘无故多出几像素（img默认是inline-block）

img下面留白,如下图：

原因可以看知乎--元素底部为何有空白？

解决办法：

设置vertical-align为bottom或者middle，如下图：

建议

工作中，使用 float 或 flex，尽量不要使用 inline-block，如果要使用，请用合理方法避开bug

更多

张鑫旭--去除inline-block元素间间距的N种方法