盒子尺寸问题，边距导致溢出答案

【问题标题】：box-sizing issue, margin is causing overflow盒子尺寸问题，边距导致溢出
【发布时间】：2014-12-24 12:07:46
【问题描述】：

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

我不明白为什么“主要内容”div 中的内容会溢出父级边界。我已将 box-sizing 模式设置为border-box，我认为这可以解决像这样的宽度问题，其中边距被添加到元素的宽度上？

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

任何见解都值得赞赏。

【问题讨论】：

【解决方案1】：

这里使用padding，而不是margin：

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

Fiddle

在When to use margin vs padding in CSS 接受的答案中很好地描述了为什么margin 不起作用

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

【讨论】：

err，效果很好，但我很困惑为什么，我认为填充增加了内部空间？
它只是twigged边框在单元格上，而不是容器上。感谢您的帮助。
嗯，这是个好问题。通常，您不会将padding 添加到表格元素中。但是在这种情况下，100% 的宽度导致表格是其父级的宽度，而边距导致它向右偏移 5px。使用padding 可以根据需要将“表格”的内容填充 5 像素。

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

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

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

}

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

你可以使用 calc 命令：

width:calc(100% - 10px)

【讨论】：