盒子模型的外边距——margin

最新推荐文章于 2022-11-27 17:46:01 发布

黄鼠狼

最新推荐文章于 2022-11-27 17:46:01 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_44004120/article/details/122533220

本文详细探讨了CSS中的margin属性，包括基础属性、复合属性和外边距的应用。重点介绍了外边距合并，如相邻块元素的垂直外边距合并和嵌套块元素的外边距塌陷，并提供了相应的解决方案。此外，还强调了清除内外边距在布局中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

盒子模型的外边距——margin

盒子模型的外边距——margin

盒子由border（边框）、content（内容）、padding（内边距）、margin（外边距）。margin属性用于设置外边距，既控制盒子和盒子之间的距离。

margin的基础属性

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin的复合属性

margin的简写方式代表的意义和padding完全一致

值的个数	表达意思
margin：5px；	1个值，代表上下左右都5px
margin：5px 10px；	2个值，代表上下5px，左右10px
margin：5px 10px 20px；	3个值，代表上5px 左右10px 下20px
margin：5px 10px 20px 30px；	4个值，代表上5px 右10px 下20px 左30px （顺时针）

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定了宽度（width）。
盒子的左右外边距都设置为auto。

一般采用 margin：0 auto；

加margin之前：

<style>
        .juzhong {
            width: 500px;
            height: 200px;
            background-color: darkblue;
        }
    </style>
    <body>
    <div class="juzhong"></div>
</body>

运行结果：
在这里插入图片描述
加margin之后：

<style>
        .juzhong {
            width: 500px;
            height: 200px;
            background-color: darkblue;
            margin: 0 auto;//重要！
        }
    </style>
    <body>
    <div class="juzhong"></div>
</body>

运行结果：
在这里插入图片描述

此方法只可应用于让块级元素居中，行内元素或行内块元素水平居中给其父元素添加text-align：center即可。

<style>
        .juzhong {
            width: 500px;
            height: 200px;
            background-color: powderblue;
            margin: 0 auto;
            text-align: center;//！！！！！！！！！！
        }
    </style>
</head>
<body>
    <div class="juzhong">
        <span>嘀嘀嘀嘀嘀嘀</span>
    </div>
</body>

运行结果：
在这里插入图片描述
由于span标签是行内元素，要想实现水平居中，则需要其父元素添加text-align：center，即为div标签加上即可。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距合并

当上下相邻两个块元素（兄弟关系）相遇时，如果上面的元素有下外边框margin-bottom，下面的元素有上外边框margin-top，则她们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

<style>
        .datou,
        .xiaotou {
            width: 200px;
            height: 200px;
            background-color: powderblue;
        }
        .datou {
            margin-bottom: 100px;
        }
        .xiaotou {
            margin-top: 200px;
        }
    </style>
    <body>
    <div class="datou">大头儿子</div>
    <div class="xiaotou">小头爸爸</div>
</body>

运行结果：
在这里插入图片描述
从运行结果可以看出两个div之间的垂直外边距取两个值中较大值（200px）

如果量出来是250px，是因为电脑默认的缩放布局是125%，也就是200px

在这里插入图片描述
解决方案：

尽量只给一个盒子添加margin值。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

<style>
        .father {
            width: 400px;
            height: 400px;
            background-color: royalblue;
            margin-top: 50px;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: springgreen;
            margin-top: 100px;
        }
    </style>
    <body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

运行结果：
在这里插入图片描述

由结果可知父元素会被子元素带动塌陷较大的外边距值（100px）

在这里插入图片描述

解决方案：

1. 为父元素定义上边框

<style>
        .father {
            width: 400px;
            height: 400px;
            background-color: royalblue;
            margin-top: 50px;
            border: 1px solid transparent;//为父元素定义上边框！
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: springgreen;
            margin-top: 100px;
        }
    </style>
    <body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

运行结果：
在这里插入图片描述

2. 为父元素定义上内边框

<style>
        .father {
            width: 400px;
            height: 400px;
            background-color: royalblue;
            margin-top: 50px;
            /* border: 1px solid transparent; */
            padding: 1px;//内边距
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: springgreen;
            margin-top: 100px;
        }
    </style>
    <body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

3. 为父元素添加overflow：hidden

<style>
        .father {
            width: 400px;
            height: 400px;
            background-color: royalblue;
            margin-top: 50px;
            /* border: 1px solid transparent; */
            /* padding: 1px; */
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: springgreen;
            margin-top: 100px;
        }
    </style>
    <body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

23运行结果均与1相同

清除内外边距

网页元素很多都带有默认的内外边距，不同浏览器默认的也不一致，因为我们在布局前，首先要清除网页元素的内外边距。

 * {
            padding: 0; //清除内边距
            margin: 0;  //清除外边距
        }

这句话也是我们通常写css的第一行代码！

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了。

（行内元素不可以设置高度宽度，但是有默认宽度是本身内容宽度，所以可以设置左右内外边距，设置上下不会起作用）