大学课程《Web前端开发与应用教程》PPT教学课件：项目四任务4 块元素垂直外边距的合并.pptxVIP

项目4盒子模型

掌握盒子相关属性1了解盒子模型的概念42理解元素的转换3熟悉元素的类型掌握理解了解熟悉?学习目标

任务四块元素垂直外边距的合并

在普通文档流中（没有对元素应用浮动和定位），当两个相邻或嵌套的块元素相遇时，其垂直方向的外边距会自动合并，发生重叠。这种现象被称为元素垂直外边距的合并知识拓展

相邻元素垂直外边距的合并外边距外边距4.1相邻块元素垂直外边距的合并

相邻块元素垂直外边距的合并1相邻块元素之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。4.1相邻块元素垂直外边距的合并

运行效果如图所示:

[点击操作演示]4.1相邻块元素垂直外边距的合并

嵌套元素垂直外边距的合并外边距外边距4.2嵌套块元素垂直外边距的合并

嵌套块元素垂直外边距的合并2对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。4.2嵌套块元素垂直外边距的合并

运行效果如图所示:

[点击操作演示]4.2嵌套块元素垂直外边距的合并

嵌套块元素垂直外边距的合并2对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。4.2嵌套块元素垂直外边距的合并

如果