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-不支持
【原文】https://www.cnblogs.com/diantao/p/6052355.html
【转载】前端小知识点---html换行被解析为空格的相关知识
原文：https://www.cnblogs.com/freess/p/11291512.html