关于margin和padding的对比

之前接触过一个经典的笔试面试题目，背景色出现在哪部分，延伸出margin和padding的对比，何时使用margin何时使用padding

先看下面盒子模型，元素自身的background属性，显示范围是边框以内的所有区域，border+padding+content

color和image同理

所以

自身设置的背景色出现在自身border-box以内的所有区域，包括padding

父级元素设置的背景色出现在父级border-box以内的所有区域，而子元素在父级的content-box中，子元素的margin也是在父级border-box以内，子元素margin会显示父级设置的背景色。

 

 

如左图子元素的margin显示的是父元素的background,如右图子元素的padding显示的是子元素的background

• ---

  padding：内边距，其判断的依据即边框离内容正文的距离，“补白”（或者叫“留白”），补白位于元素框的边界与内容区之间。
• margin: 元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域

1. 使用margin：
   需要在border外侧添加空白时。
   空白处不需要背景（色）时。但是会显示父元素的背景颜色
   上下相连的两个盒子之间的空白，需要相互抵消时
2. 用padding：
   需要在border内测添加空白时。
   空白处需要背景（色）时。背景色padding显示出来
   上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。不会重叠

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

margin和padding用于元素之间产生间距的,margin多用于同级元素间距,padding多用于父子元素间距的使用。

---

补充

background-clip属性可以修改背景显示区域（默认值为border-box上面分析的）

background-clip:border-box或者不设置

background-clip:padding-box

background-clip:content-box