从零开始前端学习[7]:外边距合并以及清除外边距合并

最新推荐文章于 2022-03-19 22:05:56 发布

^_^ 小小码nong

最新推荐文章于 2022-03-19 22:05:56 发布

阅读量1.2k

点赞数 3

分类专栏： # 1.从零开始挑战前端文章标签：外边距合并边距合并清除边距合并边距清除盒子边距问题

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78009848

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

外边距合并以及清除外边距合并

什么是外边距合并和内外边距合并?
外边距合并以及内外边距合并的清除方式

提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

什么是外边距合并以及内外边距合并?

外边距合并其实就是两个不同标签元素的边距发生了合并，即两个合并成了一个，显示边距大的。

垂直方向上的外边距合并

垂直外边距合并指的就是：当两个垂直外边距(上或者下)相遇的时候，他们将形成一个外边距。合并后的外边距的大小等于两个发生合并的外边距中的交大者

<!doctype html>                                 
<html lang="en">                                    
    <head>  <!--头部标签-->
        <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
        <meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
        <meta name="Author" content="作者是谁">     
        <meta name="Keywords" content="关键词">
        <meta name="Description" content="描述和简介">
        <title>Document</title><!--网页标题-->
        <style>                                        
            body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
            ul,ol{margin: 0; list-style: none; padding: 0;}
            a{ text-decoration: none; }
            *{ margin: 0; padding: 0; }
            .main {
                width: 1200px;
                margin:10px auto;
                background: blue;
            }

            .main div{
                width: 200px;
                height: 200px;
                background: deeppink;
                color:#fff;
                margin-bottom: 50px;
            }
            .main p{
                width: 200px;
                height: 200px;
                background: green;
                color:#fff;
                margin-top: 80px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div>我是div</div>
            <p>我是p</p>
        </div>
    </body>
</html>

显示如下:
这里写图片描述
从上面的可以看出来：第一个div的margin-bottom:50px;
但是第二个p元素margin-top:80px;但是在整个div和p标签的间距中，其实际的间距只有80px，那么问题来了，本来他们的边距应该是要增加到130px的，但是并没有，这种现象也就叫做外边距合并的现象，合并后的距离是距离大的那个

内包含外边距合并

即当一个元素包含在另外一个元素中的时候(如果没有内边距或者边框吧外边距分割开)，他们的上或下外边距也会发生合并动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
    <meta name="Generator" content="EditPlus®">    <!--编辑器的名称-->
    <meta name="Author" content="作者是谁">
    <meta name="Keywords" content="关键词">
    <meta name="Description" content="描述和简介">
    <style type="text/css">
        body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {
            margin: 0;
        }

        ul, ol {
            margin: 0;
            list-style: none;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .main{
            width: 300px;
            height:300px;
            margin:auto;
            margin-top: 30px;
            background: blue;
        }

        .main p{
            width: 200px;
            height: 200px;
            margin-top: 50px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="main">
        <p>我是p标签</p>
    </div>
</body>
</html>

显示效果如下：
这里写图片描述
从上面可以看到，内部p标签设置的margin-top:50px;是一种无效的属性，事实上这个时候就发生了内部外边距合并，只去显示外部标签的外边距，而不会显示内部标签的外边距。
当然这种现象是有条件的，
即内部标签与外部标签之间没有内边距，并且外部标签没有边框，中间也没有元素

空盒子的内外边距重合

当有一个空元素，它有外边距，但是没有边框或填充，在这种情况下，上外边距与下外边距就碰到了一起，他们会发生合并，如果这个时候外边距遇到另外一个元素的外边距，他们也会发生融合，一般情况下比较少遇到，因为你为毛要用这样一个什么属性都没有的废盒子呢？？

<!doctype html>                                 
<html lang="en">                                    
    <head>  <!--头部标签-->
        <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
        <meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
        <meta name="Author" content="作者是谁">     
        <meta name="Keywords" content="关键词">
        <meta name="Description" content="描述和简介">
        <title>Document</title><!--网页标题-->
        <!--style里面书写css样式-->
        <!-------------------------
        ==========监督热线=========
        ==========400-1567-315=====
        --------------------------->
        <style>                                        
            body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
            ul,ol{margin: 0; list-style: none; padding: 0;}
            a{ text-decoration: none; }
            *{ margin: 0; padding: 0; }
            div{
                width: 100px;
                height: 100px;
                background: deeppink;
                margin-bottom: 50px;

            }
            p{
                margin: 30px 0;
            }
        </style>
    </head>
    <body>
        <div>我是div</div>
        <p></p>
        <div>我是div</div>
    </body>
</html>

显示如下：
这里写图片描述
外边距是div先与p的外边距合并后变成50，然后p的上边距与下边距后期有进行合并，所以合并后为间距为50

怎么去清除这样的一种合并

垂直方向上的边距直接改写成一个

如上述案例中出现的margin-bottom:50px,margin-top:80px;直接改写成margin-top:130px；或者margin-bottom:130px；即可，为毛要分开写两个这样的麻烦呢

加边框去除外边距合并(内包含外边距合并)，或者加内边距来去除外边距合并

依旧拿上述的代码来做修改:

   .main{
            width: 300px;
            height:300px;
            margin:auto;
            margin-top: 30px;
            background: blue;
            /*padding:1px;*/  //加内边距可以消除
            border: 1px solid transparent;  //加边框的形式来消除
        }

直接给.main的类直接加一个透明的边框，这样就可以解决了

这里写图片描述

^_^ 小小码nong

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[7]:外边距合并以及清除外边距合并

外边距合并以及清除外边距合并什么是外边距合并和内外边距合并?外边距合并以及内外边距合并的清除方式提示博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041什么是外边距合并以及内外边距合并?外边距合并其实就是两个不同标签元素的边距发生了合并，即两个合并成了一个，显示边距大的。垂直方向上的外边距合并垂直外边距合并指的就是：当两
复制链接

扫一扫

专栏目录