为什么会有文本节点
html 中的空白文本节点 text,是由于标签的换行而产生的。下面的例子可以证明这一点
<div id="wrapper">
<span>abc</span>
<span>abc</span>
</div>
打印 div 的所有子节点(包括文本节点 text),我们发现:第一个 text 是 div 与 span 的换行,第二个是 span 与span 的换行,第三个是 span 与 div 的换行
如果我们把两个span写在同一行呢?
<div>
<span>abc</span><span>abc</span>
</div>
这时,text 消失了。这证明了:换行是 text 产生的原因
去掉文本节点的方法
空白文本节点会使得两个元素之间间隔,这有时不是我们想要得。我们可以用以下 3 种方法可以去掉它们。
- 为父标签设置font-size属性(适用于子标签都是<img />等标签)
#wrapper { font-size: 0px; }
- 把代码写成一行(缺点是代码不美观)
<div id="wrapper"> <span>abc</span><span>abc</span> </div>
- 子元素设置为block和浮动
<div id="wrapper"> <img src="a.jpg" style="display: block; float: left;"/> <img src="b.jpg" style="display: block; float: left;"/> </div>