首页 > 开发 > HTML > 正文

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

2017-09-09 13:56:53  来源: 网友分享
  • margin top left 为负数时:
    是以内容盒为基准线,所以负值使整个元素向上,右移动。
  • margin right bottom 为负数时:
    是以border为基准线,所以负值使不会影响元素的位置,但会使元素的基准线发生变化。结果使这个元素相邻的元素的位置发生变化。

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 数值为正值时候的情形,如果是负值时位移方向则按反方向进行。