幽灵节点问题（块状元素只包含一张图片的时候会有不知名的空白）的解决

最新推荐文章于 2023-07-22 15:09:25 发布

老衲的少女心i

最新推荐文章于 2023-07-22 15:09:25 发布

阅读量529

点赞数 1

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/qq_42592823/article/details/114578361

版权

81 篇文章 1 订阅

订阅专栏

幽灵节点问题

块状元素只包含一张图片时会有不知名的空白

在这里插入图片描述

在HTML5当中，内联元素的所有解析和渲染，如同每个行框盒子的前面有一个空白节点，这个节点透明，并且不占据任何宽度，而且也无法用脚本获取。但是只有在HTML5中并且使用<!DOCTYPE html>声明的时候才会有。
根据上面所说的这个空白节点（幽灵节点）实际上就是在图片前面有看不见的内容。既然是有内容，那么默认时采用的是vertical-align:baseline对齐，图片是行内块状元素它的基线是图片的底部。所以才会导致图片下面有一段空白。

解决方法：
1. 图片块状化，让图片没有基线。
2. 将图片改为底部对齐。
3. 将line-height设置为0px。上下半行间距就显示不出来了，因为是由于幽灵节点的下半行间距阻挡但是现在下半行间距没有了。所以说图片也会下来。

现在下半行间距没有了。所以说图片也会下来。

关注