浅谈margin负值问题

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

本文主要记录了margin负值问题，说到margin负值问题，很多都小伙伴都一脸懵逼。哈哈，没错说到margin大家用到的最多的还是它的正值，例如：margin-top: 20px 等等。但是margin负值的情况也十分重要，比如：经典三栏布局中的圣杯布局和双飞翼布局中就应用了margin负值。那么接下来我就带大家看看什么是margin负值。

margin负值

margin负值顾名思义，就是margin属性的值为负值的情况，例如：margin-left: -20px。看到这个例子各位小伙伴们就对margin负值的情况有了初步的了解。接下来我们就先看一下margin各值为负值的效果，并从这些页面效果中找出规律。

首先演示一下 margin-top 负值：

HTML代码：

	<div class="wrapper">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

CSS代码：

.wrapper{
            margin: 20px;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        .box1{
            width: 100px;
            height: 100px;
            /* margin-top: -50px; */
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
        }

页面初始效果：

去掉注释，margin-top: -50px时页面效果：

演示 margin-bottom 负值：

将box1CSS代码中的 margin-top: -50px 修改为 margin-bottom: -50px 时页面效果：

演示 margin-left 负值：

HTML代码不变，修改CSS代码：

 .wrapper{
            margin: 20px;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            /* margin-left: -50px; */
            background-color: red;
        }
        .box2{
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
        }

初始效果： 去掉注释，margin-left: -50px时：

演示 margin-right 负值：

将box1CSS代码中的 margin-left: -50px 修改为 margin-right: -50px 时页面效果： 综上，为margin各值为负值的情况。从中我们可以看出，margin负值就相当于从相应的边减少对应值的宽/高。（例如：margin-top：-50px ，就相当于从box1的上边开始减少50px的高度） 由此得出结论：

• margin-top 负值，元素向上移动
• margin-bottom 负值，下方元素向上移动
• margin-left 负值，元素向左移动
• margin-right 负值，右侧元素向左移动

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！