盒子边框border
内边距padding：控制盒子的内容，有撑开盒子的问题
外边距margin：盒子和盒子的距离，有外边距合并问题
1、边框：border
边框三个属性必须一起出现：border-width：1px; border-color: red; border-style: solid; //solid实线边框，dashed虚线，dotted点线
三个属性连写：border: 1px solid red;
注： border会撑开带有width和height的盒子
属性：border-top/bottom/left/right：5px；设置上下左右的距离
border-radius：5px; 设置边框圆角
border-collapse：collapse；合并相邻边框
2、内边距：padding
padding：10px;有一个上下左右10像素的边框
padding-left/right/top/bottom
padding: 10px 20px 30px; 上10 左右20 下30
注：padding会撑开带有width和height的盒子，
注：padding会撑开盒子，border也会撑开，如果规定盒子的大小，要把这两个的长度也计算进去。
（1）padding不会撑开盒子的情况
给有宽度的div设置padding会撑开盒子，而div里面的子div如果没有给宽度，继承父div的宽度，padding就不撑开。
3、外边距：margin
（1）text-align：只能让div里面的文本居中对齐；
让div盒子居中对齐：margin: 0 auto; 自动充满。左右充满就居中了
=margin-left: auto; margin-right: auoto;
用margin: 0 auto;设置居中条件：必须是块级元素和有指定高度；
（2）外边距合并：
相邻元素垂直外边距会合并，以最大的为准，如上下两个div，一个有margin-bottom一个有margin-top,这两个会合并。无法避免。
（3）嵌套块集元素垂直外边距合并：
一个大div里面有个小的div，小的div设置margin-top会把两个div一起下来，而不是小div距离大div的mergin-top；无法避免。
解决：（1）为父亲元素定义1像素的上边框或者上内边距：border：1px solid #000；会撑开盒子大小
（2）为父亲元素添加overflow:hidden;