为什么我的边缘如此混乱？

Question

这里有一个奇怪的问题，我不太懂。

我试图让3个垂直div中间有另一个div，里面有黑色边框，边缘有10px的边距。

然而，在右侧没有可见的边距，并且在底部，div从父div流出并从站点流入页脚。

我做错了什么？中间div对的CSS ......

 #mainContent {
    height: 100%;
    width: 100%;
}

#platter {
    border: 1px solid black;
    margin: 10px;
    height: 100%;
    width: 100%;
}

http://jsfiddle.net/Lf7wuty0/1/

Answer 1

解决方案：http://jsfiddle.net/efordek0/1/

边框应用于元素之外，因此如果您的元素为width:100%;且border: 1px solid black;，则边框将超出所需的约束。

不是在内部div #platter上应用边距，而是在外部div #mainContent上应用填充。这样，100%值仍然适用，但会被#mainContent的10px填充量减去，并且您的边框仍然位于所需区域内。

Answer 2

这是正确的解决方案：http://jsfiddle.net/5L4tnwtg/

变化： 添加：

*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}

修改：

#mainContent {
   height: 100%;
   width:100%;
   padding: 10px;
}

#platter {
   border: 1px solid black;
   height: 100%;
   width: 100%;
}