共计 1431 个字符，预计需要花费 4 分钟才能阅读完成。
一、盒子模型概述
盒子模型是 CSS 的基石, 指定标签如何显示；页面上的每个元素都被当成一个矩形盒子, 占据一定的页面空间, 这个盒子由内容（content）、内边距（padding）、边框（border）和外边界（margin）组成；
二、border
1、border-width
指定边框的宽度
2、border-style
指定边框的样式，border-style:none | dotted | solid | double | dashed;
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
3、border-color
指定边框的颜色
4、border-top|bottom|left|right
border-top-style
border-top-width
border-top-color
三、padding
padding：padding 区域在 border 与 content 之间；padding（填充）, 在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。
1）用来调整内容在容器中的位置关系
2）用来调整子元素在父元素中的位置关系。padding 属性需要添加在父元素上。
3）padding 值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的 padding 属性。
4）背景色和背景图像会覆盖 padding 和 content 组成的区域；
5）padding 不可以为负值
1、padding-top|bottom|left|right
2、padding:10px;
所有四个填充都是 10px
3、padding:10px 5px;
上填充和下填充是 10px 右填充和左填充是 5px
4、padding:10px 5px 15px;
上填充是 10px 右填充和左填充是 5px 下填充是 15px
5、padding:10px 5px 15px 20px;
上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px
四、margin
margin：在元素外边的空白区域，被称为边距。
1）外边距 (margin) 在 border 之外,margin 区域不应用背景;CSS 中 margin 默认值为 0
2）可以为负数。
1、margin-top|bottom|left|right
2、margin:10px 5px 15px 20px;
上边距是 10px 右边距是 5px 下边距是 15px 左边距是 20px
3、margin:10px 5px 15px;
上边距是 10px 右边距和左边距是 5px 下边距是 15px
4、margin:10px 5px;
上边距和下边距是 10px 右边距和左边距是 5px
5、margin:10px;
所有四个边距都是 10px
五、特别关注
1、行内元素
不要给上下的 margin 和 padding，上下 margin 和 padding 会被忽略。左右 margin 和 padding 会起作用。
2、外边距合并
1）、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
2）当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和 / 或下外边距也会发生合并。请看下图：
3）应用：这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
4）合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
