幽灵空白节点

一、什么是幽灵空白节点

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

<div class="wrap">
  <img class="img" src="./beach.jpeg"/>
</div>

.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