html - 边框没有按预期工作

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在元素上使用意味着您包含并进入该元素的宽度计算。paddingborder

你只padding申请了parent，所以它只在那里生效。

widthor heightofparent是自动的（默认为未指定）。因此，请尝试设置 aheight例如或添加height: inherit- 您可以看到在检查元素时paddingfor减少了。parent

请参阅下面的演示：

* {
  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;
}

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

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