Box-Sizing似乎没有像我期望的那样尊重填充

Question

有人可以告诉我为什么在给出以下fiddle example

的情况下，盒子大小似乎没有尊重div中的填充

// The code is too long for this but can be viewed using browser debugging tools
// and here is a picture that says it all. 

左栏是固定宽度：190px;

右列是宽度：100％，左边距：190px

绿色div是一个没有宽度和高度的嵌套div：20px;

 <style>
  div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
 </style>

不应该填充绿色线，因为它在左侧？

Answer 1

box-sizing:border-box不会删除填充。它只是在计算div的宽度时不考虑它。

div {width:400px; padding:10px;}将给出宽度为420px的div，因为宽度还包括填充。

但是

div {width:400px; padding:10px; box-sizing:border-box;}将提供宽度为400px的div，因为它不包含填充。

但在这两种情况下，填充仍然存在。

Answer 2

这个例子中的问题是#wizard-body div，它有一个左边距但宽度为100%，这意味着它可以扩展它的< / em>容器。浮动也会让事情变得混乱。删除这些，它将按预期工作：

#wizard-body {
    float: left;
    width: 100%;
}

绿色div的行为符合预期，但是在容器关闭屏幕之后。