如何将div内部填充放在两列布局中

Question

这是我的缩减代码：http://jsfiddle.net/rCBL9/

我想放padding: 10px;所以我在白框的内侧有10px的间距，但是当我添加它时，它会使白框的外部变大。

如何在白盒内部添加10px间距而不使它们变大？

Answer 1

使用box-sizing: border-box;，您将获得所需的结果。

.left { padding: 10px; box-sizing: border-box;  }

此外，与其他海报不同的是，我会在此处找到以前的海报;

keep padding from making the element bigger?

Answer 2

你可以通过给元素box-sizing:border-box;改变CSS盒子模型的计算方式来做到这一点。

基本上，任何元素的宽度/高度都是指定的宽度/高度加上任何边距，填充和边框。当您将元素的框大小更改为“border-box”时，将从指定的宽度/高度中减去所有额外宽度（边框/边距/填充）。

以下是关于盒子模型如何运作的好读物：http://css-tricks.com/the-css-box-model/

我为你更新了小提琴：http://jsfiddle.net/rCBL9/2/