我有两个父元素，里面有 3 个子元素。 (#grandParent>#parent>#children*3) grandParent有设定的高度和宽度，并且parent已应用填充。所有元素都有box-sizing: border-box.
With border-box应用后，填充应使children变小了，但相反，它把它推低了，并保持了它的大小。为什么不children应用填充后会变小吗？
JSFiddle https://jsfiddle.net/ryt72cvz/
* {
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>
Using box-sizing: border-box http://www.w3schools.com/cssref/css3_pr_box-sizing.asp on an元素意味着你包括padding and border进入宽度计算that元素。
你只有padding应用于parent所以它只在那里生效。
The width or height of parent is auto（默认为未指定）。所以尝试设置一个height例如，或者添加height: inherit- 你可以看到padding for 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
