前端小知識點---html換行被解析為空格的相關知識

這個系列主要記錄一下常被忽略但又經常產生影響的知識點，純做個記錄，方便查詢

 

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-不支持