border-box未按预期工作

Question

我有两个父元素，里面有3个孩子。 （#grandParent>#parent>#children*3）grandParent具有设置的高度和宽度，parent已应用填充。所有元素都有box-sizing: border-box。

如果应用border-box，则填充应使children更小，而是将其向下推，并保留其大小。为什么在应用填充时children变小？

JSFiddle

* {
  box-sizing: border-box;
}
#grandParent {
  width: 34px;
  height: 34px;
}
#parent {
  padding: 30px 5px;
}
.children {
  background: black;
  height: 3px;
  width: 100%;
  margin-bottom: 6px;
}
#reference {
  background-color: orange;
  width: 34px;
  height: 34px;
}

<div id="grandParent">
  <div id="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
  </div>
</div>

<div id="reference"></div>

Answer 1

在 元素上使用box-sizing: border-box表示您将padding和border包含在 元素的宽度计算中。

您只在padding上应用了parent，因此仅在那里生效。

width的{​​{1}}或height 自动（默认为未指定）。因此，尝试设置parent或添加height - 您可以看到height: inherit padding在检查元素时减少了。{/ p>

见下面的演示：

＆＃13;

＆＃13;

parent

＆＃13;

* {
  box-sizing: border-box;
}
#grandParent {
  width: 34px;
  height: 34px;
}
#parent {
  padding: 30px 5px;
  height: inherit;

}
.children {
  background: black;
  height: 3px;
  width: 100%;
  margin-bottom: 6px;
}
#reference {
  background-color: orange;
  width: 34px;
  height: 34px;
}

＆＃13;

＆＃13;

＆＃13;