html - 框大小问题，边距导致溢出

Question

很抱歉这个垃圾问题标题，但是为了弥补这一点我有一个 jsFiddle:

http://jsfiddle.net/y167xveh/

我不明白为什么“主要内容”div 中的内容溢出父边界。我已经将 box-sizing 模式设置为 border-box，我认为这解决了宽度问题，比如在元素的宽度上添加了边距？

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

任何见解表示赞赏。

Answer 1

在这里使用 padding 而不是 margin:

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

Fiddle

关于为什么 margin 不起作用的一个很好的描述在 When to use margin vs padding in CSS 的接受答案中。

“边距被认为在元素之外，相邻元素的边距将重叠。”