盒子模型的外边距——margin

最新推荐文章于 2023-10-23 22:11:39 发布

黄鼠狼

最新推荐文章于 2023-10-23 22:11:39 发布

阅读量1.8k

点赞数

文章标签： html css css3

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

版权

文章目录

盒子模型的外边距——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>

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

此

最低0.47元/天解锁文章

黄鼠狼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
盒子模型的外边距——margin

文章目录盒子模型的外边距——marginmargin的基础属性margin的复合属性外边距典型应用外边距合并相邻块元素垂直外边距合并嵌套块元素垂直外边距的塌陷盒子模型的外边距——margin盒子由border（边框）、content（内容）、padding（内边距）、margin（外边距）。margin属性用于设置外边距，既控制盒子和盒子之间的距离。margin的基础属性属性作用margin-left左外边距margin-right右外边距margin-top上
复制链接

扫一扫