盒模型分为四部分，分别是content、padding、border、margin四个区域。

如图所示；content区为内容区，在整个盒模型的中心，本身拥有宽高。

padding为填充区，是用来控制父元素与子元素的位置关系的，也可以控制元素和内容之间的位置关系。padding会使整个盒模型的宽度增加，可让内容区的位置上下移动。Content区的背景色会延展到padding区，但是padding属性对背景图片是不起作用的，可以说背景图片的位置不受padding的影响。

Border为边框区，位于padding与content的外层，自己拥有宽度、颜色与样式，上下左右四个边框独立设置特殊值时可形成奇特的多边形。

Margin区为最外部的扩展区，margin显示的是元素边框以外的空白，是控制同辈元素之间的位置关系的。常用的元素居中的方法是margin:0 auto;margin可以写负值。