button使用display:block之后margin重叠问题

问题遇到的现象和发生背景

margin重叠了

问题相关代码，请勿粘贴截图
<body>
    <div id="box">
        <button class="btn">按钮一</button>
        <button class="btn">按钮二</button>
    </div>
</body>

<style>
    button{
        display: block;
        margin: 10px 0px;
    }
</style>
运行结果及报错内容

按钮一的margin-bottom和按钮二的margin-top重叠

我的解答思路和尝试过的方法

尝试开启BFC，例如给box使用overflow:hidden

我想要达到的结果

margin不会重叠

不是给box添加overflow，是要给按钮二添加overflow:hidden容器触发BFC。改下面


<style>
    button{
        display: block;
        margin: 10px 0px;
    }
</style><body>
    <div id="box">
        <button class="btn">按钮一</button>
<div style="overflow:hidden">
        <button class="btn">按钮二</button>
</div>
    </div>
</body>

img

改用visibility属性，hidden隐藏，visible显示。

让元素形成BFC的布局就可以解决外边距塌陷
BFC全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素。

BFC的规则或者说是特点
1.独立且隔离的一个区域
2.里面的盒子垂直排列
3.属于同一个BFC相邻的俩个盒子（父子关系 相邻的兄弟关系）会有内边距重叠
4.BFC的区域不会与float重叠；
5.计算BFC的高度时，浮动元素也参与计算。

创建BFC（解决方案）：
1、border-top：1px solid;（这个解决方法最好，但它其实并不是BFC，相当于加了一堵墙不让margin-top冲出去。下面的 2-6 都是BFC，虽然可以解决问题，但有一些副作用，很有可能会影响原来元素的功能，比如父元素本来不应该浮动，虽然你设置浮动之后解决margin塌陷但是使得元素本来的正常功能受到影响）

2、浮动元素（元素的 float 不是 none）

3、绝对定位元素（元素的 position 为 absolute 或 fixed）

4、行内块元素

5、overflow 值不为 visible 的块元素

6、弹性元素（display为 flex 或 inline-flex元素的直接子元素）

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632