css负margin的作用

父子元素的宽度计算要满足公式：margin + padding + width = 父元素内容区宽度。当margin为负值时则会增大width的值。然而元素的背景、边框并不受margin影响，所以我们可以用负margin实现很多视觉效果。其原因在于父元素的内容宽度此时处于padding/border外头去了。而给子元素加上这部分margin时，则刚好抵消视觉外的这部分宽度，从而实现父子同框的效果。

等距排列

.container {
  width: 400px;
  margin-right: -20px;
}
.column {
  width: 120px;
  margin-right: 20px; /*视觉上显示尾元素没有margin*/
}

左右元素同时换行

在C端项目中，我经常遇到这样的需求：要实现一个左图右文的信息流效果，对于右边的文字我们要实现1和2始终同时在一行，且当1的文字过长时可以实现自动换行至图片下方。那么要怎么实现这个效果呢？

我们知道inline-block的元素会触发BFC，所以1过长时首先会将2挤到下一行，而后只有当1占据完2的空间且不够时才会换行，那么我们有没什么办法使得1在占据2的空间前提前换行呢，这就是负margin的作用了。

假如我们给1加上padding-right，2加上负的margin-left，那么当padding-right等于margin-left时，1和2就会始终在一行了。原因在于2的width在默认没有设置，且文字宽度小于margin-left时，其子元素，即包含文字的span的宽度会等于margin-left。当1的宽度逐渐增加时由于padding-right的作用，当2被挤换行时，1也会换行。具体的css代码如下。

.desc {
    display: block;
}
.info1 {
    display: inline-block;
    padding-right: 20px;
}
.close2 {
    display: inline-block;
    margin-left: -20px;
    float: right;
}
span {
    font-size: 12px;
}