它是什么

Question

例如，

<a>foo</a>
<a>bar</a>

和CSS

a {
    background-color:red;
}

a之间会有一个空格，宽度是多少？

Answer 1

宽度是常用SPACE U + 0020字符的前进宽度。这个宽度因字体而异;根据微软的Space Characters Design Standards，它可能在0.2em到0.5em之间变化，典型的宽度是0.25em。像往常一样，em表示字体的大小。因此，如果字体大小为16px，则典型间距为4px，但间距可能从3px到8px不等，具体取决于字体。

原因是当两个内联元素之间存在（仅）空格时，就像在这种情况下的换行符一样，在它们之间呈现一个SPACE字符。（这适用于正常情况。如果text-align: justify生效，则可能会拉伸空间。）

通常不应该担心宽度，但您可能有一些特定的理由知道它，例如通过设置具有相同值的负余量来取消其效果。但是，如果要删除间距，最简单且最健壮的方法是删除元素之间的所有空格：<a>foo</a><a>bar</a>。

Answer 2

默认如果锚标记写在一行中它不会占用任何空间但是当它用两行写入时你会按下一个似乎占用1个字符或2个字符宽度的输入

Answer 3

它是什么

取决于字体系列/字体大小。它被渲染为作为单个空格（这就是宽度），因为多个空格在white-space: normal样式标记中成为一个空格的方式。

如何解决

要修复它，只需将父级的字体大小设置为零，并将子级的显式大小设置为例如

a {
    background-color:red;
    font-size: 15px;
}
body{
    font-size: 0px;
}

小提琴：http://jsfiddle.net/K2WAn/

这与em存在问题，因为这些级联因此还有其他修复：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

HTML中空格的宽度是多少？

3 个答案:

它是什么

如何解决