外间距、内间距
边界margin和补白padding（依据国内出版社的翻译惯例，margin被翻译成边界，padding被翻译成补白，译者依照习惯翻译。但CodeCoke认为，margin翻译成外间距，padding翻译成内间距距更为直白和形象。你可以依据自己的习来适应这两种不同的译法。）是隔开元素最常用的两个属性。边界是元素外边的距离，而补白则是元素内部的距离。
为h2改进代码如下：
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
你可以看到二级标题外围有一个字符的宽度，还很臃肿，因为在二级标题内部有3个字符宽度的补白。
元素的四边可以设置不同的值。margin-top、 margin-right、margin-bottom、 margin-left、padding-top、padding-right、padding-bottom和padding-left是无需解释的属性（看看英文字面意思啦）。
盒状模型
边界、补白和边框（见边框）是人尽皆知的盒状模型的组成所有部分。盒状模型是这样工作的：中间是元素盒子（在脑海中想像一下情形），从里到外依次包围着补白盒子、边框盒子和边界盒子。很显然地，如下所示：
Margin box（边界盒）
Border box（边框盒）
Padding box（补白盒）
Element box（元素盒）
没有必要全部使用上述三个外围的“盒子”，但如果你能记住盒状模型，你可以把它们应用到页面的每一个元素。