html - 标签之间的不间断空间在渲染时创建可见空间

Question

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

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

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

|你好| |世界|

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

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

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

反正有没有删除这个空间？

score 3 · Accepted Answer

这就是浏览器渲染内联元素的方式——不重复的空格按原样渲染，无论它是空格、制表符还是换行符。

最可靠的方法是使用选择标签来显示块级元素，并浮动它们。但是，您应该注意，通过浮动标签，您将把它们从文档流中取出，导致父元素崩溃——这可以通过旧的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/

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

1 回答 1