负margin的总结

[riskers]

这篇文章是从原博客转载过来的，是2013年写的，有些不对的地方请指出。

---

这是一篇我自己关于负margin的理解，今天因为做项目用到了负margin，几经找资料，终于搞懂了，就赶紧记下来，免得忘记了！

• margin为正时，top、left属性是以content上（左）或垂直上方相连元素margin的下（右）边为参考线垂直向下（右）位移。
• margin为负时，right、bottom属性是元素本身的border右（下）边为参考线水平向右（下）位移。

总结

1. 盒子最后的显示大小等于盒子的border+padding+正margin，而负margin不会影响其大小。

2. margin为负且盒子static时：

   • 若属性为top、left，盒子将被拉进指定的方向;
   • 若属性为bottom、right,将后续的元素拖拉进来，覆盖本来的元素。
   • 若width没有被设置，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样

选项卡demo

怎么样实现上面菜单栏的选中状态下没有下边框的效果？
一般的思路是每个菜单栏设置边框，选中的状态没有下边框

其实还可以这样，边框不是上面菜单栏的，而是下面内容块的：

明白了把，所以只要给菜单栏设置margin-bottom:-1px就可以让下面的内容块上移1px，刚好让菜单栏的背景色盖住那个1px的边框。
如果选中状态没有背景色，就悲剧了：

请看 demo

现在看这个例子没有明显展示出负margin的能力，再看下面的

负margin加宽元素

再看一个width没有设置，通过负margin加宽的元素的布局例子，这是很常见的例子，如果不用负margin，就会很麻烦呢
demo

圣杯布局

因为BFC有这个特性：

元素在设定width时，添加border、padding、margin会导致元素变宽；但是在没有设定width时，元素会自动填满父元素，添加padding、border、margin会使元素变窄，减少量等于他们三个之和。
demo

负margin实现两列等高布局

demo

参考文章

负值之美

以上是网上资料总结，我的总结就一句话：left、top不论正负自己动，right、bottom不论正负别的元素动！正的向外，负的向内！考虑问题的时候还要考虑到盒子的特性问题！！
PS:遇到问题只要先想想什么是margin，margin的作用是什么，则负margin的工作原理则迎刃而解！

---

向我捐助 | 关于我 | 工作机会

---

[leozdgao]

对负 margin 应用在 float 元素上有点不太明白，圣杯布局的 fiddle: https://jsfiddle.net/leozdgao/kudwotoo/

想不明白为什么 left 元素设置 margin-left: -100% 可以浮动到上一行，感觉它应该是偏移出屏幕吧...

[zhurenjin]

thank you very much indeed;