盒模型和margin合并

一 盒模型

CSS盒模型分两种，一种是content-box，一种是border-box，区别是content-box的宽度只包含content，boder-box的宽度包含border，padding，content。
如下图所示，两个盒子的width均设置为100px，且均有5px的border。那么蓝色边框包裹区域的总宽度为100px+2*5px=110px，粉色边框包裹区域的总宽度为100px。

二 margin合并

1. 哪些情况会合并？
   父子margin合并，兄弟maigin合并
2. 如何阻止合并?
   父子合并，可以使用padidng/boder/overflow:hidden/display:flex。
   兄弟合并，可以使用inline-block。