css盒子外边距合并问题

1、嵌套元素外边距合并问题

需要制作一个图片在盒子内居中显示的效果，刚开始代码如下：

当内外层盒子都有margin值时，会执行较大值的margin，如下图，审查元素时发现，外层盒子margin-top为0，内层盒子margin-top为30px，但实际效果为，内外侧盒子均下移30px，且内外层盒子的border-top重合。

效果如下图：

.header {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background-color: pink;
     
}

.herder .logo {
    margin: 30px 0;
    width: 197px;
    height: 42px;
    background-color: #fff;
}

 解决方案：

1、只给外层盒子加padding，将内层盒子挤下去；

2、给外层盒子定义border-top;

3、给外层盒子添加 overflow: hidden。

扩展：相邻盒子垂直外边距合并问题(只有垂直外边距会出现合并问题)

当两个上下相邻的盒子，上盒子有margin-bottom，下盒子有margin-top时，两个盒子之间之际的距离为两个margin中的较大值，而非两者之和。

解决方案：

只给一个盒子margin值

注意：浮动的盒子不存在外边距合并的问题。