CSS--解决margin塌陷(margin-top失效)--实例

快来打我* 2023-10-01 08:12 23阅读 0赞

原文网址：[CSS--解决margin塌陷(margin-top失效)--实例\_IT利刃出鞘的博客-CSDN博客][CSS--_margin_margin-top_--_IT_-CSDN]

## 简介 ##

本文介绍如何解决margin合并的问题。包括父子元素的合并和兄弟元素的合并。

## **margin合并(塌陷)的场景** ##

当2个垂直外边距相遇时，他们将合并为一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。

下述场景会导致margin合并：

1.  当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上/下外边距会发生合并。
2.  当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
3.  当一个空元素没有边框或填充时，上下外边距碰到了一起，也会发生合并。

## **实例1：父子元素外边距合并** ##

但在Chrome和FireFox会出现这种情况，在IE6 IE7中均显示正常，这恰恰说明了IE是不符合规范的，而Chrome和FireFox则是严格遵守规范的。

需求：子元素相对于父元素向下偏移50px。

### 问题复现 ###

代码

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            body {
                margin: 0;
            }
    
            .outer {
                width: 400px;
                height: 300px;
                background-color: yellow;;
            }
    
            .inner {
                width: 200px;
                height: 200px;
                margin-top: 50px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
    
    <div class="outer">
        <div class="inner"> </div>
    </div>
    
    <script>
    
    </script>
    </body>
    </html>

结果

![7c58831587ef441e8580a7e9e4854f0e.png][]

可以看到，子元素和父元素同时向下偏移了50px。而我们想要的是只子元素向下偏移。

### 解决方案 ###

1.  设置父元素：overflow:hidden;（推荐）
2.  设置父元素：float: left;
3.  设置父元素：border:1px solid; (大于0且style不为none)
4.  设置父元素：padding:1px; (大于0)
5.  设置父元素：填充一定的内容。
6.  设置父元素或者自身：display:inline-block;
7.  设置父元素或者自身：position:absolute;

上边任意一种解决方案，都能产生如下正确的结果：

![3aaf99cfe87f488697456dec9967623d.png][]

## 实例2：兄弟元素外边距合并 ##

需求：上边的元素下边界距离下边的元素的上边界300px

### 问题复现 ###

上边的元素下外边距设置为200px，下边的元素的上外边界100px。

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            body {
                margin: 0;
            }
    
            .upper {
                width: 400px;
                height: 300px;
                margin-bottom: 200px;
                background-color: yellow;;
            }
    
            .lower {
                width: 200px;
                height: 200px;
                margin-top: 100px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
    
    <div class="upper"></div>
    <div class="lower"></div>
    
    </body>
    </html>

结果

![f33add4b22a34a8caac674bead145965.png][]

距离只有200px。（肉眼就可以看出，两个的距离和下边粉色方框的高度（200px）差不多。）

### 解决方案 ###

1.  下边的元素：增加float属性。例如：float: left

结果

![9a1daedb0e09417994e1755f693ede3c.png][]

[CSS--_margin_margin-top_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121688794
[7c58831587ef441e8580a7e9e4854f0e.png]: https://img-blog.csdnimg.cn/7c58831587ef441e8580a7e9e4854f0e.png
[3aaf99cfe87f488697456dec9967623d.png]: https://img-blog.csdnimg.cn/3aaf99cfe87f488697456dec9967623d.png
[f33add4b22a34a8caac674bead145965.png]: https://img-blog.csdnimg.cn/f33add4b22a34a8caac674bead145965.png
[9a1daedb0e09417994e1755f693ede3c.png]: https://img-blog.csdnimg.cn/9a1daedb0e09417994e1755f693ede3c.png