外边距折叠
1.问题
外边距折叠的概念？具体的两种情况（父子，同级兄弟）
2.介绍
参考链接：margin重叠--外边距折叠的出现场合及解决方法
margin重叠--外边距折叠的出现场合及解决方法
行为定义
外边距折叠：块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
出现外边距折叠的两种情况
1.同级别块级元素之间：
当对于上下垂直的两个块级元素之间未设置浮动（ ‘ float ’ 以及 ‘ position：absolute ’ ）时
上方块级元素的margin-bottom与下方块级元素的margin-top就会发生合并：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
/*上方的块级元素*/
#box_one
{
width: 200px;
height: 200px;
background-color: red;
margin-bottom:200px ;
}
/*下方的块级元素*/
#box_two
{
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="box_one"></div>
<div id="box_two"></div>
</body>
</html>
代码执行效果如下：
对于这个例子理解为边界回合并的话，根据代码距离应该是300px，但由于外边距合并的行为，距离为200px，取margin的最大值，即id值为box_one的盒子的margin-bottom值
解决方法：
1.设置浮动， ‘ float ’ 以及 ‘ position：absolute ’
2.父子级别元素之间
块级元素的父子元素之间，对于子元素设置margin-top值，父元素不进行设置，会出现子元素的margin-top值击穿父元素的现象
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
/*父元素的块级元素*/
#box_one
{
width: 200px;
height: 200px;
background-color: red;
}
/*子元素块级元素*/
#box_two
{
width: 100px;
height: 100px;
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="box_one">
<div id="box_two"></div>
</div>
</body>
</html>
代码执行效果见下：
按照一般理解，子元素的margin-top会基于父元素出现外边距，但结果并不是这样，子元素的外边距margin-top会击穿父元素。
解决方法：
1.设置border边框 （例：border： 1px solid black）
2.设置padding，内边距
3.设置浮动
4.父元素加入(overflow: hidden);
总结
以上这些内容都是发生在Block-Level的元素，设定floating和absolutely positioned的元素完全不用担心边界重叠的问题。
分类:
web开发 / 前端学习
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了