在HTML5文档声明中,内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取,就好像幽灵一样,但又确确实实地存在,表现如同文本节点一样,因此,我称之为“幽灵空白节点”。
如果没有HTML5文档声明,则不存在幽灵空白节点
一个最简单的例子证明“幽灵空白节点”确实存在
下方代码会得到一个有高度的div !
<div><span></span></div>
div { background-color: #cd0000; } span { display: inline-block; }
效果如下图: