边框框未按预期工作

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 包含在 的宽度计算中元素.

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

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

参见下面的演示：

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

边框框未按预期工作

border-box isn't working as expected

html

css

border-box

box-sizing

JSFiddle