外边距重合

概念 : 当垂直方向上有两个块元素,在上面的块元素有margin-bottom的属性,于此同时在下面的盒子有margin-top的属性,那么按照正常的推算两个盒子上下之间的距离应该是 margin-bottom(上面的盒子) + margin-top(上面的盒子) 但是实际上是两者中的较大者两者(margin-bottom和margin-top)之间谁的大则两个盒子之间的距离取谁

定义两个盒子

需求: 现在需要让上下两个盒子的高度为 100px

定义两个盒子

效果演示

外边距上下重合

嵌套外边距重合

概念 : 就是在大盒子包裹小盒子的情况下,想对内部的盒与外部的大盒子隔开一定的距离.

预期的效果展示
分析 : 将内部的盒子添加上边距
内部添加上边距
解决方案

• 设置边框
• 添加内边距
• 添加overflow:hidden属性

最终的解决方案