浅谈margin负值

浅谈margin负值

margin负值在平常代码中似乎很少用到过,最近接触了之后才觉得效果比较让我惊讶,想着自己健忘还是写下来,还克服懒癌从印象笔记挪到blog,说不定以后还能给别人看见呢(捂脸逃)。


margin负值的原理

为了方便理解负值margin,我们引入参考线的定义,参考线就是就是margin移动的基准点,而margin的值就是移动的数值。
margin的参考线有两类,一类是top、left,它们以外元素作为参考线,另一类是right、bottom,它们以自身作为参考线。
简单点说就是:

  • top负值就是以包含块(Containing block) 内容区域的上边或者上方相连元素 margin 的下边为参考线;
  • left负值就是以包含块(Containing block) 内容区域的左边或者左方相连元素 margin 的右边为参考线;
  • right负值就是以元素本身border的右边为参考线;
  • bottom负值就是以元素本身border的下边为参考线;
    另外关于包含块的定义具体请参考KB008包含块(Containing block)

下面这张图很直观地解释了margin的移动,其中红色箭头表示正值时候的移动方向,当margin为负值的时候就反方向移动。

总地来说,就是当margin-top、left为负值的时候与参考线的距离减少,当margin-right、bottom为负值的时候参考线就向左、上面移动。

实际小DEMO

1.当设置margin-top为负值的时候

<div class="box">
     <div class="one">one</div>
    <div class="two">two</div>
</div>
<style>
.box {
    width:200px;
    height: 200px;
    border: 1px black solid;
}
.box div {
    width:100px;
    height: 100px;
}
.one {
	background:gray;
}
.two {
	background:orange;
	margin-top:-50px;
}
</style>

结果如下图

当设置class为two的div的margin-top为-50的时候,它的参考线是div.one的下边,整个div.two向上移动使得与参考线的距离减少50px。

2.当设置margin-left为负值的时候

<div class="box">
     <div class="one">one</div>
    <div class="two">two</div>
</div>
<style>
.box {
    width:200px;
    height: 200px;
    border: 1px black solid;
}
.box div {
    width:100px;
    height: 100px;
}
.one {
	background:gray;
	float: left;
}
.two {
	background:orange;
    margin-left: -50px;
    float: left;
}
</style>

结果如下图

设置float:left使得两个div浮动起来,然后设置div.two的margin-left为-50px,div.two的参考线就是div.one的右边,于是div.two左移与参考线距离减少50px。

3.当设置margin-right为负值的时候

<div class="box">
     <div class="one">one</div>
    <div class="two">two</div>
</div>
<style>
.box {
    width:200px;
    height: 200px;
    border: 1px black solid;
}
.box div {
    width:100px;
    height: 100px;
}
.one {
    background:gray;
    float:left;
    margin-right:-50px;
}
.two {
    background:orange;
    float:left;
}
</style>

结果如下图

仍然让两个div左浮动,设置div.one的margin-right为-50px,这时候的参考线是本身的右边界,margin-right为负值于是参考线向反方向即左方向移动。

4.当设置margin-bottom为负值的时候

<div class="box">
     <div class="one">one</div>
    <div class="two">two</div>
</div>
<style>
.box {
    width:200px;
    height: 200px;
    border: 1px black solid;
}
.box div {
    width:100px;
    height: 100px;
}
.one {
    background:gray;
    margin-bottom:-50px;
}
.two {
    background:orange;
}
</style>

结果如下图

当设置div.one的margin-bottom为负值的时候,此时的参考线是自身的下边界,bottom为负值于是参考线向反方向即向上方移动。

margin负值的实际应用

  1. 边框去重
    有的时候我们做Tab选项卡的时候不希望tab元素和父元素都加上边框,因此就可以给tab元素添加一像素的margin。详见我知道你不知道的负Margin
  2. 左右布局
    当用margin负值之后就可以通过改变margin-top等的值成为负值之后不需要使用float就可以实现左右布局
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
<style>
.container {
	width:400px;
	order: 1px solid black;
	padding:10px
}
.left {
	width: 100px;
	height:400px;
	background-color:gray;
}
.right {
	width: 300px;
	height:400px;
	margin:-400px 0 0 100px;
	background-color:orange;
}
</style>

结果如图

最后

因为自己做的项目还不多,很多问题其实自己还并没有遇到过,先总结出来仅供参考,有不对的地方烦请指出改正。

编辑于 2017-04-10

文章被以下专栏收录