margin和padding区别及用法

padding 用于控制元素内容与边框之间的间距，是元素内部的空间；margin 用于控制元素与其相邻元素之间的间距，是元素外部的空间。

1. 使用margin的场景：
   ①若需要在border外侧添加空白时。
   ②盒子空白处不需要背景（色）时。
   ③需要使用负值对页面布局时（margin值可以取负值，但是padding不行）
   ④上下相连得两个盒子之间的空白需要相互抵消时，如15px+20px得margin，将得到20px的空白。（margin折叠）
2. 使用padding的场景
   ①需要在border内侧添加空白时。
   ②盒子空白处需要背景（色）时
   ③上下相连的两个盒子之间的空白，希望等于两者之和时。如15px＋10px将得到25px的空白。

根据具体情况使用为妙

? 盒子与盒子间不设置margin为妙，会发生（margin折叠）。在盒子内设置padding为妙。

margin折叠是指当有两个或多个垂直边距相遇时，形成的一个外边距，这个外边距的高度等于两个元素发生叠加的外边距中高度较大的一个。

发生margin折叠的三种情况

1. 元素自身的折叠
2. 相邻两个元素折叠
3. 父子元素的折叠

盒子外空白用margin居多，盒子内空白元素用padding居多