首页 > margin 负值为什么要这样设计?

margin 负值为什么要这样设计?


margin top left 好理解。
margin right bottom 为什么要这样设计呢?这样有什么好处?


这里借助怿飞的一篇文章来说明..由浅入深漫谈margin属性

这个问题你可以引入一个参考线的东西来帮助理解,( W3C 中并没有的参考线的说法。)这里的参考线指的是 margin 移动的基准点,此基准点相对于 box 是静止的。而 margin 的数值,就是 box 相对于参考线的位移量。

在 CSS margin 的设计中 top、right、bottom、left 的参考线并不一致为一类,而是分为了两类参考线,top 和 left 的参考线属于一类,right 和bottom 的参考线属于另一类。

这里top 以 containing block 的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移;
left 以 containing block 的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。
right 以元素本身的 border 右边为参考线水平向右位移;
bottom 以元素本身的border 下边为参考线垂直向下位移。

示意图如下:

从上我们可以看到 top 和 left 都是以外元素为参考,而 right 和 bottom 以本元素为参考。上面的位移方向是指 margin 数值为正值时候的情形,如果是负值时位移方向则按反方向进行。

【热门文章】
【热门文章】