外边距重合问题

产生外边距的条件：

1.块元素与快元素
2. 上下外边距
3. 没有边框

---

盒模型 : 内容区域(content) + 内边距(padding)+ 边框(border)+ 外边距(margin)

---

box-sizing: content-box;

盒子大小 默认值content-box: 内容盒子 从内容开始算的 100px=内容区域
但是网页展示的时候宽度 100(width) + 20(左右border) + 40px(左右内边距)=160px

box-sizing: border-box;

border-box 从边框开始算起 100=内容区域40 + 内边距40+ border20