理解margin负值

时间:2023-03-08 20:37:04

效果

上和左方的margin负值使元素向上和左方向移动,如果该元素position不是absolute或fixed,这还会导致之后的元素也向上,左移

下和右方的margin负值会缩小下和右方的空间,使处于该元素下,右方的元素被拉向该元素,使之后的元素发生向上,左移,以至于与之重叠

原理

由于margin在上下左右的解析逻辑不同,引入参考线概念

margin 上方负值以包含块(Containing block) 内容区域的上边或者上方相连元素 margin 的下边为参考线

margin 左方负值以包含块(Containing block) 内容区域的左边或者左方相连元素 margin 的右边为参考线

margin 下方负值以元素本身 border 的下边为参考线

margin 右方负值以元素本身 border 的右边为参考线

https://segmentfault.com/img/bVkg4m

实例

双飞翼布局:左右列固定,中间列自适应布局