html - 如果我的数学是正确的，这应该居中，对吧？

Question

根据我的阅读，以 % 表示的填充是根据父容器计算的(就像边距一样)。所以，如果是这种情况，那么下面的 3 个元素应该在父 div 中均匀分布。但是，他们不是。

如果我没记错的话，你的宽度是这样分割的:

2% 左边距

2% 向右填充

12% (4% x 3) 所有三个元素的左边距

12% (4% x 3) 所有三个元素的右边距

72% (24% x 3) 所有三个元素的宽度

---

100% 所有百分比的总和，因此三个元素应该均匀分布。

我错过了什么吗？填充不是这样计算的吗？我的数学有问题吗？

#parent {
    background-color: #F00;
    display: block;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    max-width: 850px;
    padding: 2%;
}
.element {
    background-color: #0F0;
    display: block;
    float: left;
    height: 100px;
    width: 24%;
    margin-left: 4%;
    margin-right: 4%;
}

<div id="parent">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

Answer 1

width 中的百分比, padding-*和 margin-*相对于 containing block 得到解决.

对于您的 .element 项，包含 block 是 .parent 的内容边缘。不是填充或边距，因此它不包括 .parent 上的 padding: 2%。

例如，如果您的 .element 是绝对定位的(而 .parent 是相对定位的)，则它们的包含 block 将是 padding edge .parent 的，如你所愿。当然，这需要 .element 完全 out of flow并弄乱你的布局。

#parent {
  background-color: #F00;
  display: block;
  overflow: hidden;
  margin-right: auto;
  margin-left: auto;
  max-width: 850px;
  padding: 2%;
  height: 100px;
  position: relative;
}
.element {
  background-color: #0F0;
  position: absolute;
  height: 100px;
  width: 24%;
  left: 06%; /* [[2% + 4%]]+24%+4% + 4%+24%+4% + 4%+24%+4% + 2% */
}
.element + .element {
  left: 38%; /* [[2% + 4%+24%+4% + 4%]]+24%+4% + 4%+24%+4% + 2% */
}
.element + .element + .element {
  left: 70%; /* [[2% + 4%+24%+4% + 4%+24%+4% + 4%]]+24%+4% + 2% */
}

<div id="parent">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>