css - inline-block 盒子下的内容文字错位问题

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

参考资料：

“display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法；

正文：

场景：两个 div 排在一行上，各有固定宽高，其中有一个 div 内部有文字和排版等其他填充；两个 div 杂七杂八的宽度加起来远小于 father 宽度。

拿到设计图之后，略想了一下，这不 so easy 么，既然有足够的宽度空间，那不就是随意发挥么：两 son 变 inline-block，那个有内容的 div 内或 padding ，或 flex，大致弄个上下等距不就 ok  了么，正好前面的人用 table-cell 来垂直居中，正好可以试试。然而事实证明太 naive 了，inline-block 中就藏了一个坑。

首先是思路中的效果：

很快啊，上面没什么问题（因为父元素的宽度足够，两个子元素之间的间隙可以忽略，当然这里也会出现隐藏坑，后叙）。于是很开心地去填充内容了，dom 结构变成：

愉快地 ctrl + s 之后 F5，然后就懵逼了，这不对啊，怎么成这样了，刚才不还好好的么，就加了句话？？?

于是经过翻山越岭地 Google baidu 之后，找到了参考中的资料：css 有个属性 vertical-align，它只在 display为 inline 或者 inline-block 的情况下起作用，默认值是 baseline。这意味着把元素设置成 inline(-block) 的时候，内部的文字会按照基线对齐，这也是为什么用尺子量，“55” 正好切了前一个 inbox 的 bottom。

那解决办法就简单了，每个 inbox 设置 vertical-aligh: top（如果父元素的高度是撑开的话，设置成middle、bottom、text-bottom、text-top 都可以），就可以回归思路，如下图：

其他：

在第一张图我们也看到， inline-block 的盒子之间是存在一点间隙的，这个问题和 HTML 的结构有关。正如上面我们贴的代码，两个 inbox 之间有一个换行，而浏览器在解释的时候遇到 inline(-block) 会把这个换行符解释成一个空白文本节点，这在视觉上就出现了间隙。解决办法有很多，贴两个常见的：

1. 代码写一行上，不过不利于维护；

2.父元素设置 font-size: 0，子元素重新设置字体大小；

各有优缺点，按需取用。