空白幽灵节点:浏览器在渲染过程中,会在空白的地方渲染一个没有宽度和高度的节点,这个节点被称作为 幽灵空白节点
如下列代码
<head>
<style>
*{padding: 0;margin: 0;}
div{
background-color: aqua;
}
span{
/* 当子标签为行内块元素时 */
display: inline-block;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
执行结果如图所示
![](https://i-blog.csdnimg.cn/blog_migrate/b65eea359cac99184502c57b5b82fc11.png)
解决方案:
1、父元素的font-size:0
2、当前的line-block变为block元素