千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频

1、页面中间距的设置————margin、padding。

2、 间距在盒子外面时————外间距：用margin;

间距在盒子里面时————内间距、填充、补白：用padding。

**************************************************

3、margin————

使用场景：页面中需要设置间距，且该间距对于容器来说时外面的时候用。

用 法：

a、单独设置：

外上间距：margin-top

外下间距：margin-bottom

外左间距：margin-left

外右间距：margin-right

b、用法1简写：

四个值：上、右、下、左 ——> {margin: 30px 50px 10px 20px;}

三个值：上、左右、下 ——> {margin: 10px 20px 30px;}

两个值：上下、左右  ——> {margin: 30px 60px;}

一个值：四边一样   ——> {margin: 30px;}

c、用法2：

margin：0 auto；  //一个有宽度的元素（盒子）在浏览器中横向剧中。

margin属性值为auto时，暂时只支持左右，上下无效。

margin的属性值可以给负数。比如有上下两个盒子a、b，先给a设置margin-top：30px；因为顶部要有30x的间距，所以ab会都向下移30px；那么此时如果给b设置一个margin-top：-50px；b会向上移50px（即反向移动）。详细例子见4-2 margin的auto与负数用法.html。

d、注意点：margin-top的传递问题。详细见4-3

问题一：

默认情况下给子元素添加了margin-top；之后，浏览器解析的时候，会把这个上间距也传递给父元素，导致父元素也会下来。

解决方法： a、给最近的父元素添加border-top；

b、给父元素添加over-flow：hidden； //溢出隐藏

问题二：

默认情况下，2个上下相邻的盒子，给一个盒子添加了margin-top，另外一个盒子添加margin-bottom之后，这两个垂直的间距会重叠，显示最大数值的间距。

解决方法： a、给下面的盒子添加父元素，且添加声明over-flow：hidden；

******************************************************

5、padding————：

使用场景：页面中需要设置间距，且该间距对于容器来说是里面的时候用。

用 法：

a、单独设置：

内上间距：padding-top

内下间距：padding-bottom

内左间距：padding-left

内右间距：padding-right

b、用法简写：

四个值：上、右、下、左 ——> {padding: 30px 50px 10px 20px;}

三个值：上、左右、下 ——> {padding: 10px 20px 30px;}

两个值：上下、左右  ——> {padding: 30px 60px;}

一个值：四边一样   ——> {padding: 30px;}

c、padding没有auto和负数的写法。

d、 注  意：padding是添加在盒子大小之上的，所以会把盒子给撑大。

解决办法：从宽度或者高度上减去添加的padding值。