为什么分数像素填充给父元素额外的宽度？

Question

这最好通过我的JSFiddle 来解释。我正在使用 Chrome。

我有一个 inline-block 容器元素。它的内部是内联元素（跨度）。

<div id="container">
  <span class="star">★</span><span class="star">★</span>
</div>

当我给星类填充 5px 时，容器的边框按预期呈现在最后一个元素的边缘。

当我将内边距更改为 5.5 或许多其他十进制值之一时，容器的一侧似乎有额外的宽度（内部元素越多，这种效果越深）。

实际上，我怀疑容器没有额外的宽度，但内部元素的宽度太小了。请注意 Chrome 的元素检查器显示的蓝色框比第一个示例中的要窄。

当元素内联时：

当元素是 inline-block 时：

这是怎么回事？

Answer 1

小数像素是允许的，可以参考这个答案：Can a CSS pixel be a fraction?

但是，这取决于浏览器如何解释它。如果您在 IE11 中打开小提琴，则宽度是正确的（有趣的是 IE11 在某些方面“更好”）。

Answer 2

好的，让我们试着得出一个合理的结论。

使用小数像素并没有错，但它并不能完全按照我们的预期工作，因为大多数浏览器会将小数四舍五入为整数。

我希望我能给你一个关于这件事的官方参考，但我不能。它不是一个标准，它只是一些浏览器决定呈现它的方式。 （如果有人能找到参考，请随时更新答案）

现在，记住这些信息：

这只是一个数学问题： （此措施在谷歌浏览器中计算）

没有填充，您的星号的宽度为13.33px。您正在添加5.5px 的周围填充。所以：

     FIRST STAR            SECOND STAR
--------------------   -------------------
  5.5 | 13.33 | 5.5     5.5 | 13.33 | 5.5
--------------------   -------------------

总结： 5.5 + 13.33 + 5.5 + 5.5 + 13.33 + 5.5 = 48.66

所以浏览器告诉父元素它的内部内容总和为48.66px，但根据我们的考虑，它将呈现为49px。

如果是这样，那么 49px 元素的大小应该与您的示例完全相同，因为它是：

#container { 
  display: inline-block;
  border: dashed 1px red;
}

#compare {
  border: dashed 1px blue;
  width: 49px;
  text-align: center;
  margin-bottom: 10px;
}

.star {
  padding: 5.5px;
  background-color: lightgray;
}

<div id="compare">49px</div>

<div id="container">
  <span class="star">★</span><span class="star">★</span>
</div>

结论：

你可能会问，为什么不把内部内容也四舍五入到总共 49px？

显然，浏览器会根据小数向上或向下舍入，因此13.33px 将在内部元素上四舍五入为13px，导致其渲染小于其父元素。

Answer 3

对 safari 的快速测试表明它们很合适。看：

解决这个问题的最佳方法是为星星添加边框。看这里：

#container { 
  display: inline-block;
  border: dashed 1px red;
}

#container2 { 
  display: inline-block;
}
.star {
  /* This creates extra width. */
  padding: 5.5px;
  background-color: lightgray;
}

.star2 {  
  /* This is fine. */
  padding: 5px;
  background-color: lightgray;
}

.star3 {  
  /* This is fine. */
  padding: 5.5px;
  border-top: dashed 1px red;
  border-bottom: dashed 1px red;
  background-color: lightgray;
}
.star3:first-child {  
  border-left: dashed 1px red;
}

.star3:last-child {  
  border-right: dashed 1px red;
}

<div id="container">
  <span class="star">★</span><span class="star">★</span>
</div>

<div id="container">
  <span class="star2">★</span><span class="star2">★</span>
</div>

<div id="container2">
  <span class="star3">★</span><span class="star3">★</span><span class="star3">★</span>
</div>

Answer 4

#container {
  display: inline-block;
  border: dashed 1px red;
}

.star {
  /* This creates extra width. */
  /*  padding: 4.48px 6.72px; */
  /* This is fine. */
  /*  padding: 5px; */
  /* This creates extra width. */
  padding: 5.5px;
  display: inline-block;
  background-color: lightgray;
}

<div id="container">
  <span class="star">★</span><span class="star">★</span>
</div>

#container {
  display: inline-block;
  border: dashed 1px red;
}

.star {
  /* This creates extra width. */
  /*  padding: 4.48px 6.72px; */
  /* This is fine. */
  /*  padding: 5px; */
  /* This creates extra width. */
  padding: 5.5px;
  display: inline-block;
  background-color: lightgray;
}