margin外边距合并问题以及解决方式

最新推荐文章于 2024-06-27 08:47:11 发布

songyi160

最新推荐文章于 2024-06-27 08:47:11 发布

阅读量1w

点赞数 17

分类专栏： CSS 文章标签： margin外边距合并

本文链接：https://blog.csdn.net/songyi160/article/details/87891222

版权

CSS 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

一、父子元素margin合并问题演示

在div里面有子元素div1时，若父元素div在没有设置overflow:hidden或者是border属性，则父元素div的margin-top的值为父元素div和子元素div1中的margin-top的最大值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            background: pink;
        }
        
        .div {
            margin: 0 auto;
            margin-top: 10px;
            width: 450px;
            height: 450px;
            background: #aaa;
        }
        
        .div1 {
            width: 200px;
            height: 200px;
            background: red;
            margin: 50px 0px;
        }
    </style>
</head>

<body>
    <div class="div">
        <div class="div1"></div>
    </div>
</body>

</html>

注意：div1在div中的margin-top值为0px。

二、父子元素margin合并问题解决办法

方法一：设置父元素的overflow属性为hidden。
方法二：设置父元素的border属性，如：border:1px solid red;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            background: pink;
        }
        
        .div {
            overflow: hidden;
            /* border:1px solid red;*/
            /* 利用overflow属性或者通过给父级元素设置border可以避免出现父级元素的
               margin合并的情况，当没有设置这两个属性之一时，该div的margin-top值
               会取div1的margin-top和其自身margin-top的最大值*/
            margin: 0 auto;
            margin-top: 10px;
            width: 450px;
            height: 450px;
            background: #aaa;
        }
        
        .div1 {
            width: 200px;
            height: 200px;
            background: red;
            margin: 50px 0px;
        }
    </style>
</head>

<body>
    <div class="div">
        <div class="div1"></div>
    </div>
</body>

</html>

三、兄弟元素margin合并问题演示

当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            background: pink;
        }
        
        .div {
            overflow: hidden;
            margin: 0 auto;
            margin-top: 10px;
            width: 450px;
            height: 600px;
            background: #aaa;
        }
        
        .div1 {
            width: 200px;
            height: 200px;
            background: red;
            margin: 50px 0px;
        }
        
        .div2 {
            width: 200px;
            background: green;
            margin: 30px 0px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="div">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

</html>

四、兄弟元素margin合并问题解决方法

使兄弟元素不在同一个BFC区域下，具体做法如：将兄弟元素分别触发BFC或将兄弟元素包在不同的div下，这些不同的div再分别触发BFC。参考BFC概念及应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            background: pink;
        }
        
        .div {
            overflow: hidden;
            margin: 0 auto;
            margin-top: 10px;
            width: 300px;
            height: 600px;
            background: #aaa;
        }
        
        .div1 {
            width: 200px;
            height: 200px;
            background: red;
            margin: 50px 0px;
            float: left;
        }
        
        .div2 {
            width: 200px;
            background: green;
            margin: 30px 0px;
            height: 200px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="div">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

</html>