一、背景介绍

在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

二、知识剖析

1.常规用法

p {margin: 0.5em 1em 0.5em 1em;}
顺时针对应于：上、右、下、左

2.简便用法
p {margin: 0.5em 1em;}
等价于：上、下、左、右
h1 {margin: 0.25em 1em 0.5em;}
等价于：0.25em 1em 0.5em 1em

3.图片总结

三、用法区别

1.分清两种属性的特点

(1)margin始终是透明的；margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。

(2)margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

2.使用指南

(1)margin:需要在border外侧添加空白时。 空白处不需要背景（色）时。 上下相连的两个盒子之间的空白，需要相互抵消时。

(2)padding：需要在border内测添加空白时。 空白处需要背景（色）时。 上下相连的两个盒子之间的空白，希望等于两者之和时。

3.代码实战

上图为两个div盒子的初始样式表达式

上图为初始效果，大家注意文字的位置，后期设置margin

和padding后，文字位置会有不同的变化

上图为两个div分别给了margin：5rem；之后的效果，注意两个盒子边框外产生了5rem的空白，文字位置没有变化，盒子中间空白是周围空白的两倍，是因为a1盒子的margin-left和a2盒子的margin-right发生了叠加，为10rem。

上图为把margin：5rem改为padding：5rem之后的效果，注意div边框外并没有产生空白，文字周围却多了5rem的距离，这就是padding，且padding的颜色和背景颜色是一样的

四、常见问题

1.我们再使用margin的时候，如果两个div盒子垂直方向设置margin，会发生margin塌陷，情况有很多种，下面着重演示两种最为常见的情况。

2.图文演示：

(1)第一种情况:上下div垂直方向margin塌陷

上图为初始代码

大家注意，此时a1盒子的margin-botton和a2盒子的margin-top没有发生叠加，中间的margin值和周边的margin值没有区别，这就是在垂直方向上发生了margin塌陷。margin在垂直方向发生塌陷的规律为：如果上下边距值均为正，则margin取两者中的较大值；如果上下边距值均为负，则margin取两者中的绝对值较大值；如果上下边距一正一负，则margin取两者值之和。

(2)第二种情况，父子div，子div设置margin-top，带动父div下陷

上图为初始效果，一个大的div里面套了一个小的div

上图为给里面的小div加了一个margin-top：5rem；小div并没有向我们期望的那样和大div分开，而是带着大div一起向下塌陷了。

3.解决方案

问题一：第一种情况的话，假如想要上下两个div在垂直方向是有一段10rem的空白，那就只给一个div的边距设置数值，比如可以给上面div设置10rem的margin-bottom，或是给下面div设置10rem的margin-top，这样就可以避免margin塌陷了。

问题二：第二种情况，需要对父元素进行设置，比如加个边框，如果不想让边框影响效果，可以给边框设置为透明。此外，还可以给父元素设置overflow：hidden属性，同样可以解决这个问题。

五、更多讨论

(1)margin和padding在不同的情况下会有不同的效果体现，那么两者还有哪些不一样的地方呢？

(2)父子div在垂直方向上发生margin塌陷还有哪些解决方法？