# 取消“幽灵空白节点”

# 复现

<div style="background-color: gray">
    <img style="width:150px" src="../img/vue.png"/>
</div>

打开浏览器的元素审查器，定位到图片上，你会发现图片下方与外层 div 之间存在一个间隙，这个间隙为 3px。

# 原因

任意一个含有图片的块级元素，如果没有指定高度的话，那么该块级元素与图片之间就会存在一个幽灵空白节点，导致二者之间含有间距。用 x 来表示它，如下图所示：

所谓幽灵空白节点，就是 inline、inline-block、inline-table 等内联元素的最前面永远有一个看不见的空白节点。它不占位，也无法获取，但就是会影响你的最终容器计算值和显示效果。

# 解决方案

• 图片设为 inline-block
• 父元素 line-height 足够小，比如 0
• 图片的 vertical-align 设为 top、middle、bottom 中的任意一个，只要不是默认的 base-line就行。