手册
目录
收藏399
分享
阅读3926
更新时间2025-07-16
前言:
有时,两个外边距会合并成一个外边距。
元素的顶部和底部外边距有时会被合并为一个单一的外边距,其大小等于两者中外边距较大的那个。
这种情况不会发生在左侧和右侧外边距上!只发生在顶部和底部外边距!
请看以下示例:
外边距折叠演示:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
运行实例 » 点击 "运行实例" 按钮查看在线实例
在上面的示例中,<h1> 元素的下边距为 50px,而 <h2> 元素的上边距为 20px。
按照常理来说,<h1> 和 <h2> 之间的垂直外边距应该是 70px(50px + 20px)。但由于外边距折叠的存在,实际产生的垂直外边距最终为 50px。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.7万人学习
共29课时
62.2万人学习
共25课时
39.6万人学习
共43课时
71.5万人学习
共25课时
62.1万人学习
共22课时
23.2万人学习
共28课时
34.3万人学习
共89课时
126.3万人学习