box-sizing问题，保证金导致溢出

Question

很抱歉垃圾问题标题，但要弥补我有一个jsFiddle：

http://jsfiddle.net/y167xveh/

我无法弄清楚为什么＆＃34;主要内容＆＃34; div正在溢出父母的边界。我已经将box-sizing模式设置为border-box，我认为解决了这样的宽度问题，其中边距被添加到元素的宽度上？

.markBookPage div
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

有任何见解。

Answer 1

而不是margin，请在此处使用padding：

#mbTableRootContainer {
  ...
  padding: 5px;
  ...
}

Fiddle

margin

在{{1}}

的接受答案中详细说明了{{1}}无效的原因

＆＃34;边距被认为是在元素之外，相邻项目的边距将重叠。＆＃34;

Answer 2

试试这个：

#mbTableRootContainer {
    display: table;
    width: 98%;
    margin: 4px;
    height: 400px;
}

Answer 3

我不是css专家，但你的错误就在这里：

#mbTableRootContainer {
display: table;
width: 100%;
margin: 5px;
height: 400px;

}

您将宽度设置为100％并添加5px（左右）的边距。

您可以使用calc命令：

width:calc(100% - 10px)