[转] 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来让浏览器自行计算外边距。

[转] margin负值的探讨

标签：

原文地址：http://www.cnblogs.com/linxd/p/4419412.html