幽灵空白节点和空白间隙

幽灵空白节点

在HTML5文档声明中，內联元素的所有解析和渲染表现就如同每个行框盒子的前面有个“空白节点”。 表现为宽度为0，具有一定高度，看不见

出现条件

幽灵空白节点的出现与line-box的形成有关；

• line-box的形成
  • 出现內联盒子(inline)

现象

<div><span></span></div>

span {
	display: inline-block;
}

此时div表现为22.5px(chrome)，之所以这样就是因为在span前面有一个幽灵空白节点，为什么是22.5呢，这个和font-size,line-height有关

疑问

为什么一定要设置span: inline-block才可以出现呢？

如果一个line box里没有文字、保留的空格、非0的margin或padding或border的inline元素、或其他in-flow内容（比如图片、inline-block或inline-table元素），且不以保留的换行符结束的话，就会被视作高度为0的line box。

• 参考幽灵空白节点的问题

空白间隙

浏览器会把inline內联元素间的空白字符（空格换行tab）渲染成一个空格

现象

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

ul {
	padding: 0;
}
li {
	width: 30%;
	display: inline-block;
	list-style-type: none;
}

可以看到li之间存在的空白间隙

解决

1. <li>1</li><li>2</li><li>3</li> 标签紧贴
2. ul设置font-size:0; li设置font-size: xx
3. float