盒模型分为四部分,分别是content、padding、border、margin四个区域。
如图所示;content区为内容区,在整个盒模型的中心,本身拥有宽高。
padding为填充区,是用来控制父元素与子元素的位置关系的,也可以控制元素和内容之间的位置关系。padding会使整个盒模型的宽度增加,可让内容区的位置上下移动。Content区的背景色会延展到padding区,但是padding属性对背景图片是不起作用的,可以说背景图片的位置不受padding的影响。
Border为边框区,位于padding与content的外层,自己拥有宽度、颜色与样式,上下左右四个边框独立设置特殊值时可形成奇特的多边形。
Margin区为最外部的扩展区,margin显示的是元素边框以外的空白,是控制同辈元素之间的位置关系的。常用的元素居中的方法是margin:0 auto;margin可以写负值。