本文探讨了HTML5文档声明中内联元素前存在的‘幽灵空白节点’现象。这个无形的节点虽无法直接观测，但它影响着元素的渲染，尤其是在涉及inline-block元素时。通过一个简单的<div><span></span></div>示例，展示了它如何导致有高度的div出现。了解这一特性对于前端开发者优化布局至关重要。
在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。
如果没有HTML5文档声明，则不存在幽灵空白节点
一个最简单的例子证明“幽灵空白节点”确实存在
下方代码会得到一个有高度的div ！
<div><span></span></div>
div {
background-color: #cd0000;
}
span {
display: inline-block;
}
效果如下图：
扫一扫
1112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
