Question

我有两个相同的跨度，但由于某种原因，第二个显示更窄。 JSFiddle现在已经关闭了，所以这里有一个完整的HTML示例：

<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <span style="background-color:#ccc; margin-right:0.125em;">
            &nbsp;&nbsp;&nbsp;
        </span>
        <span style="background-color:#ccc; margin-right:0.125em;">
            &nbsp;&nbsp;&nbsp;
        </span>
    </body>
</html>

似乎最后一个总是更窄但是如果我添加更多的跨度它甚至更奇怪。第一个有时会有不同的宽度，宽中间和最后一个之间的值。

我错过了什么？

Answer 1

在插入额外空间的第一个上。如果所有跨度都是单行，则按预期工作：

<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <span style="background-color:#ccc; margin-right:0.125em;">&nbsp;&nbsp;&nbsp;</span>
        <span style="background-color:#ccc; margin-right:0.125em;">&nbsp;&nbsp;&nbsp;</span>
        <span style="background-color:#ccc; margin-right:0.125em;">&nbsp;&nbsp;&nbsp;</span>
    </body>
</html>

你想要存档什么？如果您希望所有跨度具有相同的长度，则应通过设置

在CSS中执行此操作

span {
    display: inline-block;
    width: 2rem;
}

Answer 2

我认为原因是，边距不会扩展父元素的宽度 http://jsbin.com/eHaNIR/1

Answer 3

问题是标签之间的空间。

不起作用：

<body>
  <span margin-right:0.125em;"> &bnsp; </span>
  <span margin-right:0.125em;"> &bnsp; </span>
</body>

效果很好：

<body>
  <span margin-right:0.125em;"> &bnsp; </span>
  <span margin-right:0.125em;"> &bnsp; </span>
  works well because of this text
</body>

如何破解它：

span:after {
  content: '';
  display: inline-block
}

如何正确修复它（缩小代码）：

<body><span margin-right:0.125em;"> &bnsp; </span><span margin-right:0.125em;"> &bnsp; </span></body>

使用其他文字修复演示：
http://jsbin.com/AFuPomI/1/edit

这也可以提供帮助：
http://css-tricks.com/fighting-the-space-between-inline-block-elements/

为什么两个相同的跨度有不同的宽度？

3 个答案: