主页 / 建站知识 /

详解CSS外边距折叠引发的问题

建站知识 2021-07-03 08:42www.168986.cn长沙网站建设

第一种两个块级元素的上下边距折叠

第二种父元素和子元素（或者一个元素）的外边距

第三种空的块级元素的上下外边距

折叠的根本原因

margin之间直接接触，没有阻隔

折叠后外边距的计算

1.如果两个外边距都是正值，折叠后的外边距取较大的一个
2.如果两个外边距一正一负，折叠后的边距为边距之和
3.如果两个外边距都为负数，折叠后边距为较小的边距

解决方案解决方法实际上也就是阻止外边距直接接触

第一种、第三种只有静态流的元素才会发生外边距合并故设置float position inline-block都可以

<style>
.bother{
            width: 50px;
            height: 50px;
            margin: 50px;
            background-color: #4400;
            /1.float: left;/
            /2.position: absolute;/
            <!--3.display: inline-block;-->
        }
        /.father{/
            /2.position: relative;/
            /background:#cdd1;/
        /}/
        /.bother1{/
            /2.:50px;/
        /}/
        /.bother2{/
            /2.:250px;/
        /}/
</style>
<body>
<div class="father">
<div class="bother1 bother"></div>
<div class="bother2 bother"></div>
</div>
</body>

第二种（嵌套的情况）只要border padding非0或者有inline元素隔开，比如在父元素里加一行文字也可以

<style>
        .margin-box{
            width: 50px;
            height: 50px;
            /margin: 50px;设置了上下左右的外边距/
            margin: 50px;
            /margin-left: 50px;/
            /margin-right: 50px;/
            /div是块级元素，所以设置左右外边距也不会使父元素有左右外边距/
            background-color: #fae900;
            /5.2 display: inline-block;/
        }
        .father{
            <!--3.overflow: hidden;-->
            background:#cdd1;
            /1.border: 1px solid;/
            /2.padding: 20px;/
            /5.1 display: inline-block;/
        /如果没有border和padding只有测试这个字，那么子元素的外边距不会在父元素里显示/
        /而仅仅只有上外边距显示，下外边距不显示/
        /而如果在子元素狼蚁网站SEO优化同样写一个测试，那么下外边距也会显示/
        }

    </style>
</head>
<body>
<div class="father">
    <!--4.<span>测试</span>-->
    <div class="margin-box"></div>
    <!--4.<span>测试</span>-->
</div>
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：css3 给背景设置渐变色的方法 下一篇：用CSS遮罩实现过渡效果的示例代码

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by