div 内 100% 宽的表格不喜欢边距答案

【问题标题】：100% wide table inside div doesn't like marginsdiv 内 100% 宽的表格不喜欢边距
【发布时间】：2012-09-12 05:37:14
【问题描述】：

似乎当我在 div 中有一个表格并将表格设置为 100% 宽度并给它一些边距时，它似乎忽略了右侧边距。这是它的小提琴：

【问题讨论】：

【解决方案1】：

宽度适用于元素的实际 content，因此您有一个具有 100% 宽 content 的表格，除此之外，您还可以添加一些边距来推动宽度超过 100%，因此表格的右侧超出了父级的右边缘。可能您应该在父级上使用填充而不是在表格上使用边距，或者使用仅边距的附加包装器<div>。

【讨论】：

【解决方案2】：

只需将padding: 10px; 添加到.inner 类并从表中删除margin。
Here 是演示

【讨论】：

【解决方案3】：

这就是 CSS 默认盒子模型的工作原理：元素的宽度（通过 width: x 定义）+ 边框 + 边距 + 填充 = 它占用的总空间量。

您可以使用box-sizing: border-box 更改盒子模型，这将导致width: 100% 包含您的填充/边框。

【讨论】：