大多数标签，只要使用了，大概率会出现盒子模型的常见问题，下面总结了几点：
外边距正常情况
水平布局 的盒子，左右的 margin 正常，互不影响，最终两者的距离为 左右 margin 的和
外边距合并现象
垂直布局的块级 元素，上下的 margin 会合并，如果两个盒子的上下外边距相同，取其中一个；如果不同，则最终两者的距离为 margin 的 最大值
这种情况是可以避免的，只给其中一个盒子设置 margin 就可以了：
外边距塌陷现象
互相嵌套的 块级元素 ，子元素的 margin-top 会作用在 父元素 上，导致父元素一起向下移动
解决方法
（1） 给父元素设置 border-top 或者 padding-top ，分隔父子元素的 margin-top
以上边框为例，如果设计图中有的话可以设置
（2） 给父元素设置 overflow:hidden，推荐使用
（3） 转换成行内块元素，父元素、子元素都可以转换，效果一样，这里转换子元素
（4） 也可以设置浮动
行内元素的 margin 和 padding 无效的情况
在给行内元素设置 margin 和 padding 时，水平方向的布局有效，垂直方向的布局无效，对于这种情况，可以给行内元素增加 行高
外边距上下边框不生效：
给行内元素增加 行高
