标签之间的非间隔空间在渲染时创建可见空间

Question

不确定我是否只是在这里遗漏了一些东西，但在我的应用中，我要去：

<label>Hello</label>
<label>World</label>

当它们被渲染时，它看起来像：

  

|你好| |世界|

两个标签之间有一些难看的空间（假设我给它们一个边框或背景颜色）;

如果我将标签移动到同一行，它可以正常工作。

<label>Hello</label><label>World</label>

无论如何要删除此空间？

Answer 1

这就是浏览器呈现内联元素的方式 - 非重复的空格按原样呈现，无论是空格，制表符还是新行。

最可靠的方法是使用选择显示标签是块级元素，并浮动它们。但是，您应该注意到，通过浮动标签，您将把它们从文档流中取出，导致父级崩溃 - 这可以使用旧的clearfix hack修复，或者只使用overflow: hidden在父元素上。

假设你的标记看起来像这样：

<form>
    <label>Hello</label>
    <label>World</label>
</form>

解决问题的CSS将是：

form {
    overflow: hidden;
}
label {
    display: block;
    float: left;
}

请参阅此处的示例：http://jsfiddle.net/teddyrised/7RXDm/

---

或者，您可以使用与浏览器渲染引入的空间近似的值来声明它们的负边距，但这是不可预测的，尤其是在处理灵活的字体大小，不同的字体系列以及不同的缩放级别时。