5分钟深入了解margin属性

最新推荐文章于 2024-04-15 19:17:28 发布

Dariuslwk

最新推荐文章于 2024-04-15 19:17:28 发布

阅读量2w

点赞数 40

分类专栏： DAYNOTE 文章标签： css html css3 html5

本文链接：https://blog.csdn.net/qq_44158936/article/details/105007236

版权

DAYNOTE 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

1、定义与用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明：这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注释：允许使用负值。

2、属性值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

3、深入理解margin属性

3.1、margin的由来

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pW2UqgWK-1584763271240)(D:\DAYNOTE\盒子模型.PNG)]$

由表及里，盒子模型包括 margin（外边距）、border（边框）、padding（内边距）、content（内容）。
而margin 又有四个属性：margin-top（上外边距）、margin-right（右外边距）、margin-bottom（下外边距）、margin-left（左外边距）。
因为margin（外边距）一定是透明的，所以它可以用来使得不同的盒子之间留有一定的间隙从而达到布局美观等效果。

3.2、margin 在同级元素之间的应用

3.2.1、水平方向的外边距合并

两个水平方向的盒子相遇，那么最终两者之间的距离为左边盒子的右外边距和右边盒子的左外边距做外边距之和。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>深入理解外边距</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            body{
                font-size: 0;
            }
            .left{
                width: 100px;
                height: 20px;
                display: inline-block;
                background-color: black;
                margin-right: 10px;
            }
            .right{
                width: 100px;
                height: 20px;
                display: inline-block;
                background-color: black;
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
    <div class="left">左边盒子</div>
    <div class="right">右边盒子</div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVKtO0hk-1584763271242)(D:\DAYNOTE\外边距-左右盒子.PNG)]$

此时，左右盒子的距离 = 左边盒子的右外边距 + 右边盒子的左外边距 = 10px + 20px = 30px

3.2.2、竖直方向的外边距合并

两个竖直方向的盒子相遇时，其两者的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>深入理解外边距</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            body{
                font-size: 0;
            }
            .top{
                height: 100px;
                width: 20px;
                background-color: green;
                margin-bottom: 10px;
            }
            .bottom{
                height: 100px;
                width: 20px;
                background-color: blueviolet;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
    <div class="top">上边盒子</div>
    <div class="bottom">下边盒子</div>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ra7lRIYJ-1584763271243)(D:\DAYNOTE\外边距-上下盒子.PNG)]$

此时，上下盒子之间的距离 = 下边盒子的上边距 = 20px

注意，两种情况的测算方式不同，左右叠加，上下取最大值

3.3、margin在父子元素之间的应用

3.3.1、在子元素中设置水平方向的margin值

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>在子元素中设置水平方向的margin值</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            body{
                font-size: 0;
            }
            .father{
                width: 300px;
                height: 300px;
                background-color: gray;
            }
            .son{
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
    <div class="father">
        父元素
        <div class="son">
            子元素
        </div>
    </div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VuK7THUt-1584763271243)(D:\DAYNOTE\子元素的外边距1.PNG)]$

此时，子元素的水平方向的外边距为100px。

因为是父子元素，所以还要考虑到父元素的内边距（padding）的情况，现在向父元素里面加入padding：100px;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>在子元素中设置水平方向的margin值</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            body{
                font-size: 0;
            }
            .father{
                width: 300px;
                height: 300px;
                background-color: gray;
                padding: 100px;
            }
            .son{
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
    <div class="father">
        父元素
        <div class="son">
            子元素
        </div>
    </div>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Moz2a5us-1584763271244)(D:\DAYNOTE\子元素的外边距2.PNG)]$

此时，因为子元素一定位于父元素的内容（content）里，且父元素被内边距撑大了，所以

**子元素在水平方向上与父元素的距离 **= **父元素padding ** + 子元素margin-left = 100px + 100px = 200px

3.3.2、在子元素中设置竖直方向的margin值

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>在子元素中设置数值方向的margin值</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            .father{
                width: 300px;
                height: 300px;
                background-color: gray;
            }
            .son{
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
    <div class="father">
        <div class="son"></div>
    </div>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QemrIvHL-1584763271245)(D:\DAYNOTE\父子元素的竖直方向的外边距1.PNG)]$

此时，没有实现我们想要的效果，但父元素和子元素同时往下移了100px的距离。

实际上这是因为当父元素没有设置padding、border时，出现了一个bug：父元素的上方与子元素的上方完全重合在了一起，无法分开。所以才会导致上述这种父元素和子元素同时向下的情况。

为了得到理想结果，我们采取以下方法：

在父元素中添加 overflow:hidden;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>在子元素中设置数值方向的margin值</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            .father{
                width: 300px;
                height: 300px;
                background-color: gray;
                overflow: hidden;
            }
            .son{
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
    <div class="father">
        <div class="son"></div>
    </div>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d7QhReV4-1584763271246)(D:\DAYNOTE\父子元素的竖直方向外边距2.PNG)]$

此时，子元素在竖直方向上距离父元素为100px，达到了想要的效果。

给父元素添加 overflow:auto; 和 position:relative;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>在子元素中设置数值方向的margin值</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            .father{
                width: 300px;
                height: 300px;
                background-color: gray;
                overflow: auto;
                position: relative;
            }
            .son{
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
    <div class="father">
        <div class="son"></div>
    </div>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BLiJppJp-1584763271247)(D:\DAYNOTE\父子元素的竖直方向外边距2.PNG)]$

3.4、margin值的单位为%的情况

百分比（%）是相对于该元素的父元素（容器），对于同级元素和父子元素都是如此。

但是在同级元素中使用竖直方向的margin时会出现意想不到的结果。

3.4.1、同级元素在水平方向使用值为%的margin

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>同级元素在水平方向使用值为%的margin</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            body{
                font-size: 0;
            }
            .left{
                display: inline-block;
                width: 100px;
                height: 20px;
                background-color: green;
                margin-right: 20px;
            }
            .right{
                display: inline-block;
                width: 100px;
                height: 20px;
                background-color: blue;
                margin-left: 20%;
            }
        </style>
    </head>
    <body>
    <div class="left"></div>
    <div class="right"></div>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rZmunaWP-1584763271247)(D:\DAYNOTE\百分比外边距1.PNG)]$

此时，左边盒子和右边盒子之间的距离相差 20% 的 body 水平距离。

3.4.2、同级元素在竖直方向使用值为%的margin

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>同级元素在竖直方向使用值为%的margin</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            .top{
                height: 100px;
                width: 20px;
                background-color: green;
            }
            .bottom{
                height: 100px;
                width: 20px;
                background-color: blueviolet;
                margin-top: 20%;
            }
        </style>
    </head>
    <body>
    <div class="top">上边盒子</div>
    <div class="bottom">下边盒子</div>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vKsqqcs7-1584763271248)(D:\DAYNOTE\百分比外边距2.PNG)]$

此时，元素之间在竖直方向上使用margin，当值的单位为%时，它是相对于父元素的宽度，即浏览器的宽度。

3.4.3、父子元素使用值为%的margin

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>父子元素使用值为%的margin</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            body{
                font-size: 0;
            }
            .father{
                width: 300px;
                height: 300px;
                background-color: gray;
                overflow: hidden;
            }
            .son{
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                margin-left: 20%;
                margin-top: 10%;
            }
        </style>
    </head>
    <body>
    <div class="father">
        <div class="son"></div>
    </div>
    </body>
</html>