很多CSS初学者不太理解margin和padding的区别，用语言描述总是非常难懂，用一幅图片就能很好解释了。其实从这幅图基本就能理解了，但是我还是稍微的讲解一下。

由内而外开始，最里层是内容区域，一般都是在html中的<p></p>标签中。5的地方就是padding，4的地方是border，1的地方就是margin。如果说border（边框）是内阁内外的大门，padding就是内边距，也就是内容距离房屋大门的距离，margin就是外边距，是外面其他的房屋距离大门的距离。一切内容都是存在于border这个大门中的。3是背景图片，2是背景色。背景图片和背景色可以设置任何一个，也可以不设置，也可以两个都设置。当同时设置了背景图片和背景色的时候会像图上表现的一样，背景图像会覆盖住背景色，当背景图像不存在时才会显示背景色。

举个例子，比如有个div，id值为box，那么：

#box{
	background-color:#000000;    //设置背景色为黑色
	background-image:url(image.jpg);    //设置image.jpg为背景图片
	border:1px solid #0000ff;    //添加一个1像素宽的蓝色实线作为边框
	margin:5px;    //外边距为5个像素
	padding:5px;    //内边距为5个像素
	width:500px;    //设置内容宽度为500像素，一般等于背景图像的宽度
	height:300px;    //设置内容高度为300像素，道理同上
}

最后两行设置了内容的高度和宽度为500像素和300像素。那么整个div所占的宽度就是内容宽度+两边的边框宽度+两边的内边距+两边的外边距，也就是500+2+10+10=522像素。margin就是指定了div的外部与其他元素的间距。

OK，到此结束，CSS盒子模型就是这么简单。