margin和padding的区别以及什么时候使用

margin和padding的区别以及什么时候使用

首先需要明白，盒子模型主要定义四个区域：内容（content）、边框与内容的区域，称为内边距（padding）、边框（border）、边框与外部的区域，称为外边距（margin）。

区别

1. margin：表示边框以外的区域

2. padding：表示边框与内容之间的区域

使用场景

1. 使用margin的场景：
   1. 需要在border（边框）以外的区域添加空白间距时；
   2. 空白区域不需要使用背景颜色时
   3. 注意：上下两个相连的盒子之间使用的外边距需要相互抵消。
   4. 需要使用负值对页面布局时（注意：margin的值可以取负数，padding的值是不能使负数的）

margin需注意：

​ margin在垂直方向上相邻的值相同时会发生叠加，水平方向的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠，但是，此时一个为正数，一个为负数，并不是取其中较大的值，而是用边界的绝对值，也就是正的边界值和负的边界值相加。

2. 使用padding的场景：
   1. 需要在border内侧添加空白
   2. 空白区域需要使用到背景颜色
   3. 注意：上下相连的两个盒子之间的空白，间距是两者之和

最后，需注意margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间距；margin用于布局分开元素，使元素与元素互不干扰；padding用于元素与内容之间间隔，让内容与元素之间有一段距离。

最后的最后，在怪异盒模型中，一个块的总宽度受marign影响，但不受padding的影响。