效果
上和左方的margin负值使元素向上和左方向移动,如果该元素position不是absolute或fixed,这还会导致之后的元素也向上,左移
下和右方的margin负值会缩小下和右方的空间,使处于该元素下,右方的元素被拉向该元素,使之后的元素发生向上,左移,以至于与之重叠
原理
由于margin在上下左右的解析逻辑不同,引入参考线概念
margin 上方负值以包含块(Containing block) 内容区域的上边或者上方相连元素 margin 的下边为参考线
margin 左方负值以包含块(Containing block) 内容区域的左边或者左方相连元素 margin 的右边为参考线
margin 下方负值以元素本身 border 的下边为参考线
margin 右方负值以元素本身 border 的右边为参考线
https://segmentfault.com/img/bVkg4m
实例
双飞翼布局:左右列固定,中间列自适应布局