| 盒模型的组成：内容区、内填充（补白）、边框、外边距。 |
1.内填充（padding）
| 内填充，长在内容和盒子之间，在盒子内容 |
| 控制子元素在父元素中的位置，会把盒子撑大 |
| 如果想让盒子保持原有大小，需要在原有的宽高上减掉padding |
| 如果没有设置固定宽高，不需要减 |
| 不能设置负值，不会对背景图造成影响 |
| 可以单独设置一边（padding-left \ right \ top \ bottom） |
| padding:30px; 四周 |
| padding：10px 30px； 上下、左右 |
| padding：10px 30px 50px； 上、左右、下 |
| padding：10px 30px 50px 100px； 上、右、下、左 |
2.外边距（margin）
| 长在元素之外 |
| 控制同级元素之间的位置关系 |
| 不会对盒子的大小造成影响 |
| 可以设置负值 |
| 可以单独设置一边（margin-left \ right \ top \ bottom） |
| margin:0 auto; 让当前元素在父元素中左右居中 |
|
| margin:30px; 四周 |
| margin：10px 30px； 上下、左右 |
| margin：10px 30px 50px； 上、左右、下 |
| margin：10px 30px 50px 100px； 上、右、下、左 |
3.边框（border）：边框长在元素的宽高之外
边框的意思，描述盒子的边框
边框有三个要素： 粗细 线性样式 颜色
border :solid 5px red;
线性样式 粗细 颜色
|
|
border-left:10px solid red; |
|
border-width\border-style\border-color
1个属性值 四周 |
| 属性值 | 边框类型 |
| solid | 实线边框 |
| dashed | 虚线边框 |
| dotted | 点状线 |
| none | 无边框 |
原文：https://www.cnblogs.com/singlef/p/12595568.html