这是一个相当简单的页面——两段文字，一段在<div>之内，一段在<div>之外。<div>内部的文字指定了一个红色的虚线框，使盒状模型更易于理解。这里整个盒子的宽为350像素。下面就是这个盒子的外观（图B）：
图B
例1
接下来，我们增加一些补丁（列表B）：
列表B
#box {
?width: 350px;
?border-color: red;
?border-style: dashed;
padding: 10px;
}
图C显示的输出结果：
图C
增加的补丁
如你所见，在文字四个边上增加的补丁已将元素内容与边框间的空间加大了10个像素。现在盒子的整个宽为350+10+10=370像素。
然后，我们再增加边框的厚度（列表C）：
列表C
#box {
?width: 350px;
?border-color: red;
?border-style: dashed;
?padding: 10px;
border-width: 15px;
} | 
