块状元素

1、block水平元素

.demo {width:50cm;} /*width=50cm*/
.demo {width:50cm; padding:0 15cm;} /*width=15+50+15=80cm*/

所以，padding影响元素的尺寸（会在两边增加元素尺寸）

但是width:auto 或者 box-sizing:border-box 的时候...

.demo {width:80cm; box-sizing:border-box; padding:0 15cm;} /*width=80cm 总宽度不变，只是内容的宽度收缩*/

此时，padding不影响元素的尺寸

但是width:auto 或者 box-sizing:border-box 的时候，padding大小超过宽高时...，此时padding还是会影响元素尺寸!!!

总结

1、 padding过大时，尽管加了box-sizing:border-box也一定会影响尺寸;

2、width非auto（即不是%值而是具体大小值时），padding会影响尺寸;

3、width:auto或box-sizing为border-box（padding非暴走），不影响尺寸，只是内容的宽度收缩;

内联元素

1、inline水平元素

• 水平padding影响尺寸，垂直不影响尺寸，但是会影响背景色（占用空间）————包括垂直方向

水平间距发生改变，垂直不变，但是背景色会改变