HTML5网页设计盒子模型-内容+padding+boder+margin

内容

由width（宽度）和height（高度）属性控制。分为auto（自动调整）、固定值（px/em）和百分比三种值。

padding（内边距）

四种基本属性

padding-top	上内边距
padding-bottom	下内边距
padding-left	左内边距
padding-right	右内边距

padding:10px 20px 30px 40px;	/*上 右 下 左*/
padding:10px 20px 30px;	/*上 左右 下*/
padding:10px 20px;	/*上下 左右*/
padding:10px;	/*四个方向*/

border（边框）

border-color	边框的颜色	border-top-color/width/style border-bottomcolor/width/style boder-left-color/width/style boder-right-color/width/style
border-width	边框的粗细
border-style	边框的样式

margin（外边距）

四种基本属性

margin-top	上外边距
margin-bottom	下外边距
margin-left	左外边距
margin-right	右外边距

注意：默认情况下，<a>标签是有外边距的。

有关计算：

总宽=左外边距+左边框+左内边距+内容的宽+右内边距+右边框+右外边距

总高=上外边距+上边框+上内边距+内容的高+下内边距+下边框+下外边距

方法：从左到右画一条线，从上到下画一条线。