前端小知识点---html换行被解析为空格的相关知识

2021-12-20 00:05:58

这个系列主要记录一下常被忽略但又经常产生影响的知识点，纯做个记录，方便查询

html换行被解析为空格也是常说的3像素空隙的问题，根据测试不同浏览器产生的空隙大小会不一样，Chrome，Firefox，IE8+都存在这样的问题，这个问题的原因相比大家都知道，浏览器把换行解析成了“空白节点”，就是javascript中nodeType等于3的节点，IE6,7是忽略这个节点的。

span{ border:1px solid red; padding: .5em 1em; }

<span>1</span>

<span>2</span>

<span>3</span>

解决办法有多个：

1、不换行，直接把代码写在一样。

<span>1</span><span>2</span><span>3</span>

　　缺点：不利于文档格式化，对开发者不友好

2、设置margin-left为负值

span{ border:1px solid red; padding: .5em 1em; margin-left:-3px; }

　　缺点：不同浏览器间隙不同，需要设置多次

3、设置父元素字体大小为0

div{ font-size:0px;}

span{ border:1px solid red; padding: .5em 1em; font-size:12px; }

<div>

	<span>1</span>

	<span>2</span>

	<span>3</span>

</div>

　　这是目前最通用的做法

规避办法：

表格大家都很熟悉，上述代码渲染的结果和表格是不是很像！！大家在使用表格的时候是不是从来没出现过这种缝隙，因此规避办法很简单，用table代替，如何处理呢，来看看代码

div{ display:inline-table}

span{ border:1px solid red; padding: .5em 1em; font-size:12px; display:table-cell }

<div>

	<span>1</span>

	<span>2</span>

	<span>3</span>

</div>

这种写法完全不需要考虑这3像素空隙的问题，当然这种做法没有考虑兼容性，毕竟inline-table IE-不支持

码农公寓