一、什么是幽灵空白节点

1、在HTML5文档声明下,块状元素内部的内联元素的行为表现为多了一块空白节点(无宽度,只有高度),例如下面这样:

1
2
3
<div class="wrap">
<img class="img" src="./beach.jpeg"/>
</div>
1
2
3
4
5
6
.wrap {
background-color: orange;
}
.img {
background-color: paleturquoise;
}

幽灵空白节点示例

二、为什么会有幽灵空白节点

(1) 外层的块级元素默认的 line-height 在桌面端表现为 1.2,取决于元素的 font-family

(2) 内联元素 vertical-align 默认基线对齐

(3) 综上,此时的基线是行高的顶部,图片下面多出一段空白,即是 line-height 的高度

三、如何处理幽灵节点

1、外层的 line-height 设置为 0

2、 内联元素的 vertical-align 设置为其他元素

3、内联元素设置 display:block,使 vertical-align 失效

4、默认情况下 line-height 为数字,此时,该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小,所以可以外层块级元素 font-size 设置为 0