CSS盒模型

盒模型图

• Content（内容区）：它是整个元素的宽和高，是属于元素内容的区域
• Border（边框）：它是盒子的边缘既是边框
• Padding（填充区）：它是盒子边框与内容之间的间距，或者说是父元素与子元素之间的内边距
• Margin（外边距）：它是盒子边框以外的外边距，或者说是同辈元素之间的间距

边框border

属性	描述
border-top-width:10px ;	上边框宽度
border-top-style:solid;	上边框线型
border-top-color:#f00;	上边框颜色
border:10px solid #ff0;	边框复合型写法

内边距padding

属性	描述
padding-top:10px;	上填充
padding： 1 2 3 4 ;	1、上；2、右；3、下；4、左

注意：
padding属性对背景图片是不起作用的，可以说背景图片的位置，是不受padding的影响的。如果元素本身有背景色，那么背景色会延展到padding区域。

外边距margin

属性	描述
margin-top:10px;	上外边距
margin：1 2 3 4	1、上；2、右；3、下；4、左