元素的内部空隙被称为盒模型的补白。补白位于元素边框与内容之间，更像Word字处理软件中的页边距。
设置补白可以使用padding属性，例如：
- padding:2px;/*定义元素四周补白为2px*/
- padding:2px 4px;/*定义上下补白为2px，左右补白为4px*/
- padding:2px 4px 6px;/*定义上补白为2px，左右补白为4px，下补白为6px*/
- padding:2px 4px 6px 8px; /*定义上补白为2px，右补白为4px，下补白为6px，左补白为8px*/
- 也可以使用margin-top、margin-right、margin-bottom、margin-left属性独立设置上、右、下和左边界的大小，例如：
- padding-top:2px;/*定义元素上补白为2px*/
- padding-right:2em;/*定义右补白为元素字体的2倍*/
- padding-bottom:2%;/*定义下补白为父元素宽度的2%*/
- padding-left:auto; /*定义左补白为自动*/
与边界不同，补白取值不可以为负。补白和边界一样都是透明的，当设置元素的背景色或边框后，才能感觉到补白的存在。
【示例1】下面示例设计导航列表项目并列显示，然后通过补白调整列表项目的显示大小，效果如图20所示。
<style type="text/css">
ul {/*清除列表样式*/
margin: 0; /*清除IE列表缩进*/
padding: 0; /*清除非IE列表缩进*/
list-style-type: none; /*清除列表样式*/}
#nav {width: 100%;height: 32px;} /*定义列表框宽和高*/
#nav li {/*定义列表项样式*/
float: left; /*浮动列表项*/
width: 9%; /*定义百分比宽度*/
padding: 0 5%; /*定义百分比补白*/
margin: 0 2px; /*定义列表项间隔*/
background: #def; /*定义列表项背景色*/
font-size: 16px;
line-height: 32px; /*垂直居中*/
text-align: center; /*平行居中*/}
</style>
<ul id="nav">
<li>美 丽 说</li>
<li>聚美优品</li>
<li>唯 品 会</li>
<li>蘑 菇 街</li>
<li>1 号 店</li>
</ul>
图20 IE下预览效果
在布局中，混用边界和补白来间隔不同模块区域，或者分割相邻元素。但下面这个问题应引起重视：
【示例2】当发生边界重叠、或宽度溢出时，建议选用补白作为调整元素间距的首选属性。为了便于理解，请看下面示例。
<style type="text/css">
#box1 { margin-bottom: 6px; }
#box2 { padding-top: 3px; }
</style>
<div id="box1">上边元素</div>
<div id="box2">下边元素</div>
这是一个简单的示例，假设上下两个模块的间距为6px，现在要调整box1与box2的间距为9px，此时有四种方法可供选择：
- 增加box1的margin-bottom的属性为9px，但可能会影响到同行其他模块的布局。
- 增加box1的padding-bottom的属性为3px，但会使上边元素过于上移而呈现突兀。
- 增加box2的margin-top的属性为3px，但由于上下元素边界的重叠而无法实现。如果要增加box2的margin-top的属性为9px，会存在更大的布局危险。
- 增加box2的padding-top的属性为3px，这样就可以实现box1与box2之间的间距为9px，但又不会响应同行其他元素的布局，整个页面又不会出现过大起伏错落。
补白与边界、边框一样都是可选的，并不是每个元素都必须全部设置，如果不设置这些属性，CSS默认其值为0。但是很多元素已经被浏览器预定了特定样式，如body、p、h1～6、ul等，这些预定义样式主要包括补白和边界的属性设置。当然，也可以重置margin和padding为0，清除其中的预定义样式。为了快速开发，可以在页面设计之初，用通配选择符清除所有元素的补白和边界样式。
/*[清除所有元素的预定义样式]*/
* {
margin:0; /*清除边界值*/
padding:0; /*清除补白值*/
}