盒模型的组成
css盒模型包括content、padding、border、margin
而盒模型可分为两种，即标准盒模型（实际设置的是 content box）和替代盒模型（实际设置的是 border box），浏览器默认设置为
box-sizing: border-box;
标准和模型：content box width = 内容宽度；
替代盒模型：border box width = 内容宽度 + padding + border.
对比如下
内容区域 content area ，由内容边界限制，容纳着元素的“真实”内容，例如文本、图像或是视频。
内边距区域 padding area ，由内边距边界限制，扩展自内容，负责延伸内容区域的背景，填充内容与边框的间距。
边框区域 border area ，由边框边界限制，扩展自内边距，是容纳边框的区域。
外边距区域 margin area 由外边距边界限制，用空白扩展边框，以分开相邻的元素。
外边距合并
两个相邻元素在上下方向的外边距可能会合并为单个边距。而合并后的边距以最大值为准。
-
哪些情况会合并
父子合并 —— 即无隔开情况下（无border、padding、行内内容、清除浮动等）
兄弟合并 —— 即同层相邻元素之间外边距重叠
-
怎么阻止合并
兄弟合并是符合预期的，但可以用display:inline-block;消除（width=100%）
父子合并可以：给父元素添加padding/border；添加overflow:hidden；用display:flex;
注意：
外边距合并只发生在垂直方向，水平方向不合并！
