因HTML标签之间的空格呈现效果不一样

2016.10.17 Web 0 评

今天在写页面时发现了一个问题，HTML代码

<input type="text" />
<input type="text" />
<a href="" ></a>

和

<input type="text" /><input type="text" /><a href="" ></a>

在页面的呈现效果不一样，具体来说就是在margin/padding上面的两个input之间会有空隙而下面的没有空隙。
以往也曾遇到过这类问题，但都没有时间去深究，令人抓狂。
百度Google都没有解决方法，甚至都不知道如何正确描述这种问题。

后来在群上面有童鞋给出了解决方案：
方案一：给内联元素加上float属性，但觉得这种方法不是很好
方案二：给这些元素的父元素加上font-size:0px，即

<div style="font-size:0px;">
    <input type="text" />
    <input type="text" />
    <a href="" ></a>
</div>

问题解决。

但到最后仍不知道产生该问题的原因

Hello World