在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。
.simple {
width: 500px;
margin: 20px auto;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}以前有一个代代相传的解决方案是通过数学计算。CSS开发者需要用比他们实际想要的宽度小一点的宽度，需要减去内边距和边框的宽度。值得庆幸地是你不需要再这么做了...
代码实例：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.simple {
width:500px;
margin:20px auto;
background-color: #65ca5c;
}
.fancy {
width:500px;
margin:20px auto;
padding:50px;
border-width:10px;
background-color: #65ca5c;
}
</style>
</head>
<body>
<div class="simple">
<p>我小一些...</p>
</div>
<div class="fancy">
<p>我比它大！</p>
</div>
</body>
</html>效果图如下：
