第7章曾经讨论过，网页设计人员可以为元素设置负外边距。这会导致元素框超出其父元素，或者与其他元素重叠，但并不违反框模型。考虑以下规则：

div{border:1px dotted gray;margin:1em;}

p{margin:1em;border:1px dashed silver;}

p.one{margin:0-1em;}

p.two{margin:-1em 0;}

在第一个例子中，根据数学计算，这个段落的width计算值加上其左右外边距刚好等于父元素div的width。所以，这个段落最后将比其父元素宽2em，但从数学角度讲实际上并没有更“宽”。在第二个例子中，负的上下外边距实际上增加了元素的height计算值，将其上下外边界向外移，这就与它之前和之后的段落发生了重叠。

网页设计结合使用正负外边距会很有用。例如，可以创造性地结合正负外边距，使一个段落“超出”其父元素，或者可以创建一种蒙德里安风格的效果，有多个重叠或随机放置的框。

div{background:silver;border:1px solid;}

p{margin:1em;}

p.punch{background:white;margin:1em-1px 1em 25%;

border:1px solid;border-right:none;text-align:center;}

p.mond{background:#333;color:white;margin:1em 3em-3era-3em;}

由于“mond”段落的下外边距为负，其父元素的底端会向上拉，使得段落超出其父元素的底端。

说到上下外边距，网页设计人员还要记住重要的一点，正常流中垂直相邻外边距会合并，这个内容在上一章已经介绍过。外边距合并在设置了样式的每一个文档中都在起作用。例如，以下是一个简单的规则：

p{margin:15px 0;}

这会导致一个段落跟在另一个段落后，二者之间有15像素的“外边距空间”。如果外边距没有合并，那么这两个相邻段落之间应当有30像素的空间，但是网站建设人员不希望这样。

不过，这确实说明设置外边距时必须小心。你很有可能想去掉标题和下一段之间的空间。由于HTML文档中的段落都有一个上外边距，如果只是将标题的下外边距设置为0是不够的，还必须去掉段落的上外边距。利用CSS2的相邻兄弟选择器很容易做到这一点：

h2{margin-bottom:0;}

h2+p{margin-top:0;}

遗憾的是，浏览器对相邻兄弟选择器的支持还很有限（在写作本书时），大多数用户都会看到标题与其下一段之间有1em的间隔。不使用网站建设CSS2选择器也可以得到所要的效果，不过要麻烦一些：

h2{margin-bottom:0;}

p{margin:0 0 1em;}

这会去除所有段落的上外边距，不过由于段落都还有一个1em的下外边距，所以还会保留所要的段间间隔，如图8-14所示。

这样能正常工作，因为段落之间的1em间隔是外边距合并的结果。因此，如果去掉其中一个外边距（在这里就是上外边距视觉效果与保留该外边距的效果是一样的。