浅谈负margin

Posted 2020-10-07 小目标

通常来说margin为正值时，我们很清楚其布局形式，即在border边界线处再往外扩展指定长度。可margin为负又表示什么呢，表示始于border边界线处并向内扩展指定长度，这样，下一个文档流对象便是从margin边界线处起，显示出来。

元素的实际宽度 = 内容部分的width + padding + margin

所以：内容部分的width = 元素实际宽度 - margin - padding

没有设置width的元素的实际宽度值是由父元素的宽度，然后减去margin，所以就会得到实际上比父元素更宽的值。而设置了width的元素就不需要计算宽度了，这时候margin只会影响起始的位置。 

实例分析

    *{
        margin:0; 
        padding:0;
    }

    .wrap{
        width:400px; 
        border:5px solid #aaa;
    }

    .example{
        width:200px; 
        height:200px; 
        background:#CCCCFF;
    }

    .normal{
        width:200px; 
        height:200px; 
        background:#CCE8CF;
    }

    .example{
        margin:-10px 20px -30px 40px;
    }

<div class="wrap">
      <div class="example">example元素：margin参考线举例说明文字，请查看此元素由于margin的变化所移动的位移量。</div>
      <div class="normal">一个普通的Box</div>
</div>

 

分析：

margin:-10px(top) 20px(right) -30px(bottom) 40px(left);

上-10px和左40px将以外元素为参考，所谓外元素就是本元素的边界元素（元素的紧邻元素）。example元素上边和左边的边界元素即为wrap父元素，wrap父元素为基准点，example的margin-top为-10px，如果为+10px，example元素相对于wrap父元素边缘为基准，那么example元素会同wrap父元素10px产生间隙边距，那么反过来，margin-tip:-10px;还是与wrap父元素边缘为基准，反过来向上推10px的距离位置。example元素的margin-left为40px，这里就按照正常逻辑相隔40px边距，同理如果为-40px，那么就是反方向向左推进40px的距离位置。

再来看example元素的margin-right和margin-bottom，由上文得知这俩个值是以元素本身为参考。什么叫以元素本身为参考呢，确切含义是指以自身为参考来影响周围元素的位置（实质即为影响下边和右边相邻元素的参考线）。这里的margin-bottom为-30px，对于其自身位置没有任何变化，但是对于其下方元素normal元素产生了极大的影响，因为normal元素的上边界元素即为example元素，根据example元素边界来判定自身位置，想象下如果example元素margin-bottom为+30px，那么example元素将隔开下方的normal元素，反之为-30px，下方normal元素由于example参考线内凹，导致了normal元素自个儿身不由己的被“提”了上去了。这就是以自身为参考影响周围元素位置的含义。

这里梳理一下规律，当margin四个值都为正数值的话，那么margin按照正常逻辑同周围元素产生边距。当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。