Question

最好通过我的JSFiddle来解释。我使用的是Chrome。

我有一个内联块容器元素。它内部是内联元素（跨度）。

＆＃13;

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

＆＃13;

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

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

实际上，我怀疑容器没有额外的宽度，但内部元素的宽度太小。请注意Chrome浏览器的元素检查器显示的蓝框如何在第一个示例中应该更窄。

当元素是内联时：

当元素是内联块时：

这里发生了什么？

Answer 1

允许使用小数像素，您可以参考以下答案：Can a CSS pixel be a fraction?

但是，它取决于浏览器如何解释它。如果你在IE11中打开你的小提琴，宽度是正确的（有趣的IE11在某些事情上更好'）。

Answer 2

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

使用小数像素并没有错，但它并不像我们预期的那样完全正常，因为大多数浏览器会将小数字向上舍入为整数。

我希望我能就此事给你一个正式的参考，但我不能。它不是标准，它只是某些浏览器决定渲染它的方式。 （如果有人可以找到参考，请随时更新答案）

现在，记住这些信息：

这只是一个数学问题： （此度量标准在Google Chrome中计算）

如果没有填充，则您的星号字符的宽度为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.66像素，但根据我们的考虑，它将呈现为49像素。

如果这是真的，那么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的快速测试向我们展示了它们的合适性。看：

与此斗争的最佳方法是为明星添加边框。看看这里：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 4

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

#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;
}

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

4 个答案: