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

区别

• margin：表示边框以外的区域

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

使用场景

使用margin的场景：

• 需要在border（边框）以外的区域添加空白间距时；

• 空白区域不需要使用背景颜色时

• 需要使用负值对页面布局时（注意：margin的值可以取负数，padding的值是不能使负数的）

注意：

上下两个相连的盒子之间使用的外边距需要相互抵消。

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

使用padding的场景：

• 需要在border内侧添加空白

• 空白区域需要使用到背景颜色

注意：

上下相连的两个盒子之间的空白，间距是两者之和

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

补充

怪异盒模型：content=content+padding+border

标准盒模型：content=content

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