CSS案例之margin外边距合并问题

◆ margin外边距合并问题原因:

所有毗邻的两个或者多个盒元素的margin会合并为一并共享之。毗邻的意思是同级或嵌套的盒元素,并且他们之间没有非空内容、padding或者border分隔。

◆ 父子元素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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lC0poGSk-1575449897131)(en-resource://database/5846:1)]

◆ 父子元素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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVMXPgTh-1575449897133)(en-resource://database/5848:1)]

◆ 兄弟元素margin合并问题解决方法:

使兄弟元素不在同一个BFC区域下,具体做法如:将兄弟元素分别触发BFC或将兄弟元素包在不同的div下,这些不同的div再分别触发BFC。参考[BFC概念及应用](%3Ca href=“https://blog.csdn.net/songyi160/article/details/87892155”%3Ehttps://blog.csdn.net/songyi160/article/details/87892155%3C/a%3E)

<!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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值