html - 父级填充宽度为 100% 的子级

Question

我有一个符合以下 css 规范的 div:

width:200px;
padding:5px
border:1px solid

和另一个 div 因为它是这个 css 的 child :

width:100%
border:1px solid

这些 div 在 FF 和 IE 中呈现如下:

但是右边的 padding 好像比左边少了!谁能告诉我为什么会出现这种行为？
谢谢

Answer 1

发生这种情况是因为内部 div 的边框不是 width 本身定义的一部分，所以您的内部 div 实际上是 100% + 2px 宽。

您应该为内部 div 指定 box-sizing: border-box;，这样它的宽度将包括边框

参见 MDN documentation有关此属性的更多信息(和浏览器支持)。