“幽灵空白节点”是内联盒模型中非常重要的一个概念,具体指的是:
在HTML5 文档声明中,内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取,就好像幽灵一样,但又确确实实地存在,表现如同文本节点一样,因此,我称之为“幽灵空白节点”。
注意,这里有一个前提,文档声明必须是HTML5 文档声明(HTML 代码如下),如果还是
很多年前的老声明,则不存在“幽灵空白节点”。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: #cd0000;
}
span {
display: inline-block;
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>
效果如下:
实际上也是一个盒子,不过是个假想盒,名叫“strut”,中文直译为“支柱”,是一个存在于每个“行框盒子”前面,同时具有该元素的字体和行高属性的0 宽度的内联盒。规范中的原文如下:
Each line box starts with a zero-width inline box with the element’s font and line
height properties. We call that imaginary box a “strut”.
明白“幽灵空白节点”的存在是理解后续很多内联元素为何会这么表现的基础。
参考:CSS世界