为什么标签和跨度之间的距离会增加div（仅限Chrome）的高度？

Question

我在客户端上有这个问题。我已经缩小了这个问题，并且看到问题是一个介于关闭标签和关闭范围之间的单个空间。比较这两个：

<div class="outerdiv"> 
<span class="outerspan"><span class="innerspan"></span> 
<input type="radio" value="true" checked="checked"><label>Label</label></span> 
</div> 


<div class="outerdiv"> 
<span class="outerspan"><span class="innerspan"></span> 
<input type="radio" value="true" checked="checked"><label>Label</label> </span> 
</div> 

在Chrome中，外部div的高度差异很大，差异是基于标签的边距。不在FF中。这似乎与内联块有关。不过，我似乎无法理解这些数字，Chrome开发人员工具似乎并没有帮助我让他们变得直白。

这里显示的高度小提琴：

http://jsfiddle.net/3hHk5/6/

更新： Safari浏览器增加了高太多，但不如Chrome浏览器。数字对我来说似乎很随意。

澄清： 我想了解为什么 FF，Chrome和Safari之间的高度不同，以及数字的来源。我的特定问题的修复可能只是删除空间:)

Answer 1

删除浮动：从左 innerspan，似乎在摆弄工作。我在这里完全达到了span/float的目的。使用float从文档流中移除元素。如果要将文本对齐到左侧，请使用text-align：left。

编辑：

在HTML的空格会影响所有的内联元素，它特别影响的高度。您已在外部使用display：inline-block。如果您注意到，第二个DIV中的结尾跨度标记之前有空格。这是额外高度的原因。

<div id="space" class="outerdiv space"> 
<span class="outerspan"><span class="innerspan"></span><input type="radio" value="true"  checked="checked"><label>Label</label> </span> 
</div> 

您会注意到，如果您在关闭跨度标记之前移除空间，则会影响高度。因此，使用display：block会忽略空格或者删除HTML中的空格。

Answer 2

.outerspan { 
    display:block; 
}