在填充应用父级中具有100％宽度的子级

Question

我有div这个css规范：

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

和另一个div因为它是这个css的孩子：

width:100%
border:1px solid

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

但似乎正确的填充比剩下的少！任何人都可以告诉我为什么会出现这种行为？ 谢谢

Answer 1

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

您应为内部div指定box-sizing: border-box;，因此其宽度将包含边框

有关此属性的更多信息（和浏览器支持），请参阅MDN documentation。

Answer 2

它的边界将它推向右边。将box-sizing: border-box设置为内部div。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Answer 3

您应该再次检查盒子模型。

你有一个宽度为100％的div，并为它添加了1px的边框，所以div变为100％+ 2px宽度，它会像你看到的那样被推到右边。

您应该删除“width：100％”并仅添加边框。 （因为div是一个块元素，它将采用整个宽度）

你甚至不需要添加盒子大小，因为IE7不支持它。 （如果你想要IE7支持）

Answer 4

你父元素的溢出是什么？除非我弄错了你用边框将宽度设置为100％，所以在200px的div内宽度为200px，因此边框不会显示。

我的快速解决方案（确保有更好的方法）是使填充在右侧2px更多或比整体填充少2px。