[转] margin负值的探讨

原文:  margin负值-权威指南 [http://www.csswang.com/exp/cssexp/3863.html]

 

static元素是没有设定成浮动的元素,下图说明了负margin对static元素的作用。

1. 当static元素的margin-top/margin-left被赋予负值,元素将被拉进指定的方向。

/* 元素向上移动10px */
#mydiv1 { margin-top: -10px; }

2. 但如果你设置margin-bottom/right为负数,元素并不会如你所想的那样向下/右移动,而是将后续的元素拖拉进来,覆盖本来的元素。

/* mydiv1下边空出10px的位置给后续所有元素, mydiv1本身不移动 */

#mydiv1 { margin-bottom: -10px; }
  • 在这里,我们要注意的一点是,如果mydiv1是块元素,则mydiv会水平方向上会占据一整行,即使好像是有了空位,但是后面的元素依然不能放到右边。
  • 块元素在垂直方向上没有那么霸道,如上例所示,不论mydiv1是块元素还是行内元素,后续的元素都可以进入这个10px的空位。
  • 负值的计算是以某个margin的边为起点的,而且不仅限于当前元素的范围。例如我设置 #mydiv { margin-bottom:-1000px; }, 则后面的元素就飞出屏幕了。
  • 解决margin-right问题,可以用float使得块元素变为行内元素,也可以使用margin: auto来让浏览器自行计算外边距。
原文地址:https://www.cnblogs.com/linxd/p/4419412.html