幽灵空白问题

内容描述

幽灵空白节点：就是某一个节点排除了边线边框及内容高度以后，还存在额外的高度。简要还原示例：

情景一

这是问题的开始，可以发现，inline-block存在内容时，block高度正常；而不存在时，block存在一个和字体大小相当的高度（同时受line-height的限制）。

html 复制代码

<!DOCTYPE html>
<html>
  <body>
    <div style="background: red; display: block">
      <div style="display: inline-block">
        <span>123123123</span><br /><span>123123123</span><br /><span>123123123</span>
      </div>
    </div>
    <div style="background: red; display: block">
      <div style="display: inline-block"></div>
    </div>
  </body>
</html>

情景二

给inline-block加上一些属性，比如overflow: hidden;，block区域会出现比inline-block高度一定的高度。

html 复制代码

<!DOCTYPE html>
<html>
  <body>
    <div style="background: red; display: block">
      <div style="display: inline-block; background: yellow; overflow: hidden">
        <span>123123123</span><br /><span>123123123</span><br /><span>123123123</span>
      </div>
    </div>
    <br />
    <div style="background: red; display: block">
      <div style="display: inline-block"></div>
    </div>
  </body>
</html>

图1.2 情景二展示

解决方法

情景一的情况可以理解为子节点为inline-block且为空时，父节点会默认给出一个受font-size和line-height控制的高度。这种情况一般不会出现在项目中（因为子节点应该会有内容，不然这个节点没啥意义）。解决办法就是设置父节点的font-size。

情景二是项目中可能遇到的情况。经过掘金大佬的友好指路后，得出问题所在：

inline-block设置了overflow: hidden;后，垂直对齐方式（vertical-align）被设置为了父节点的基线，相当于不设置overflow时，设置vertical-align: super；可以简单的理解为：其实父节点高度和子节点的高度相同，但是子节点的对齐方式被设置为父节点的基线，产生了向上的位移，这时的父节点高度就由子节点高度加上子节点相对原来的对齐方式向上位移的距离。

解决方法就有很多了：

将子节点的vertical-align设置为text-bottom；
将父节点的font-size设置为0，同时设置正确的子节点字体大小（不设置正确会没有高度）；
打破这种对齐规则，比如：让父节点表现为弹性盒子。

幽灵空白问题

内容描述

情景一

情景二

解决方法

评论区

历史记录