前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣

题目

常规块盒子有一种机制叫外边距折叠，即垂直方向上的两个外边距相遇时，会折叠成一个外边距，且折叠之后的外边距高度为两者之中较大的那一个。现在给类名为"top"、"bottom"两个盒子都设置宽度、高度且都为"100px"、都设置外边距且都为"10px"，可以添加任意颜色便于区分两个盒子。此时通过调试工具可以发现两个盒子之间的距离为"10px"，并不是"20px"，说明已经发生了外边距折叠。
外边距折叠好像很奇怪，实际上却很有用。当一个页面包含了多个段落，如果没有外边距折叠，从第二个段落开始，所有段落的间距都是最上方段落的上外边距的两倍，有了外边距折叠，段落间距才会相等。
如果想要清除两个盒子之间的外边距折叠，可以给目标盒子设置以下属性：
1. display: inline-block
2. float属性值不是"none"的元素
3. 绝对定位
现在给类名为"bottom"的盒子设置"position"属性为"absolute"，可以看到下方的盒子向下移动了，此时外边距折叠失效。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

#yyds干货盘点#前端歌谣的刷题之路-第一百二十五题-外边距重叠_html

#yyds干货盘点#前端歌谣的刷题之路-第一百二十五题-外边距重叠_外边距_02

编辑

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外边距折叠</title>
</head>
<style type="text/css">margin: 0;
      padding: 0;
  }
  .top{      
width:100px;
height:100px;    
background-color:pink; 
margin:10px;      
}         
.bottom{    
position:absolute;    
width:100px;         
height:100px;        
background-color:green;   
margin:10px;      
}   
</style>
<body>

 <section class="top"></section>
        <section class="bottom"></section>

</body>
</html>

#yyds干货盘点#前端歌谣的刷题之路-第一百二十五题-外边距重叠_类名_03