一、内边距（padding）
1.概念
元素内边距指的是边框和内容之间的距离
2.说明
（1）padding在改变内边距的同时会更改盒子的宽高(上下左右叠加计算）
（2）属性值：内边距大小（无论是百分比还是固定单位数值）不能为负数
3.用法
（1）综合使用 ①更改全部内边距 #aaa{padding:20px;}
②更改上下和左右 #aaa{padding:20px 30px;}
③更改上，左右和下 #aaa{padding:10px 20px 30px;}
④分别更改（按顺时针）#aaa{paddeing:10px 20px 30px 40px;}
（2）单独更改①上：#AAA{padding-top:20px;}
②下：#AAA{padding-bottom:20px;}
③左：#AAA{padding-left:20px;}
④右：#AAA{padding-right:20px;}
padding不仅可以用于添加内边距，还可以用于删除不需要的默认内边距
二、边框(border)
可以通过border-top/bottom/left/right对各个边单独设置
1.边框样式（border-style)
边框每个边都可以单独设置样式，和padding遵循一样顺序
（1）无边框：#bbb{border-style:none;}
（2）有边框 ①实线：#bbb{border-style:solid;}
②虚线：#bbb{border-style:dashed;}
③点线：#bbb{border-style:dotted;}
④双线：#bbb{border-style:double;}宽度和border-width一致
⑤立体（效果取决于边框颜色）Ⅰ 沟槽：#BBB{border-style:groove;}
Ⅱ 脊边：#BBB{border-style:ridge;}
Ⅲ嵌入：#BBB{border-style:inset;}
Ⅵ突出：#BBB{border-style:outset;}
2.边框宽度（border-width）
属性值：（1）数值
（2）关键词：thick 、medium 、 thin（每个人的关键词可能有所不同）
3.边框颜色（border-color）
（1）语法与color语法一致
（2）有边框样式才能显示颜色
三、外边距（margin）
1.概念
元素外边距指的是边框和边框之间的距离（或者可以理解为盒子和盒子之间的距离）
2.说明
（1）属性值可以为负值,元素会比原来更接近临近元素
（2）百分比为相对于父级标签的大小
(3)上、下外边框的设置对不可替换内联元素(如 <span> )无效；
3.用法
（1）综合使用 ①更改全部内边距 #ccc{margin:20px;}
②更改上下和左右 #ccc{margin:20px 30px;}
③更改上，左右和下 #ccc{margin:10px 20px 30px;}
④分别更改（按顺时针）#ccc{margin:10px 20px 30px 40px;}
（2）单独更改①上：#CCC{margin-top:数字/百分比/auto;}
②下：#CCC{margin-bottom:数字/百分比/auto;}
③左：#CCC{margin-left:数字/百分比/auto;}
④右：#CCC{margin-right:数字/百分比/auto;}
4.外边距合并&解决方案
（1）概念：块的上外边距和下外边距有时会合并为单个边距，
其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
（2）情况 ①同一层相邻元素之间的外边距重叠，导致下面元素的外边距被吞掉了
解决方案：尽量给只给一个盒子添加margin值
②没有内容将父元素和后代元素分开
解决方案：为父元素定义上边框/为父元素定义上内边距/为父元素添overflow:hidde
③空的块级元素
