网页设计中负外边距确实对垂直格式化有影响，而且它们会影响外边距如何合并。如果垂直外边距都设置为负值，浏览器会取两个外边距绝对值的最大值。如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值。换句话说，负值要增加到正值，所得到的就是元素间的距离。图7-21给出了两个具体的例子。
图7-21：负垂直外边距的例子
注意，上、下外边距为负时有一种“拉近”效果。实际上，这与负水平外边距使元素超出其父元素没有什么区别。请考虑：
p.neg {margin-top:-50px; margin-right: 10px; margin-left: 10px; margin-bottom: 0; border: 3px solid gray;}
<div style="width: 420px; background-color: silver;
padding: 10px; margin-top: 50px; border: 1px solid;">
<p class="neg"> A paragraph.
</p> A div.
</div>
如图7-22所示，因为段落的上外边距为负，所以它被向上“拉”了 50像素。注意，以上标记中在段落后面有一个div，这个div的内容也向上拉了50像素。
图7-22：负上外边距的效果
负的下外边距会使段落看上去被向下拉。将以下标记与图7-23所示对照：
p.neg {margin-bottom:-50px; margin-right: 10px; margin-left: 10px; margin-top: 0; border: 3px solid gray;}
<div style="width: 420px; margin-top: 50px;">
<p class="neg"> A paragraph.
</p>
</div>
<p> The next paragraph.</p>
图7-23：负下外边距的效果
图7-23中显示，div后面的元素会根据div底端的位置放置。可以看到，相对于视觉上子元素（段落）的底端，实际上父元素div的底端在它之上。div后面下一个元素与div底端之间的距离是正确的。根据你使用的规则，确实应该如此。
下面来考虑一个例子，其中有一个列表项、一个无序列表以及一个标题，它们的外边距都合并。在这里，为无序列表和标题指定了负外边距：
li {margin-bottom: 20px;}
ul {margin-bottom:-15px;}
h1 {margin-top:-18px;}
两个负外边距中较大的一个（-18px）增加到了最大的正外边距上（20px），这就得到了20px- 18px = 2px，因此，列表项内容底端与h1内容顶端之间只有2个像素的距离，如图7-24所示。
图7-24：正负外边距合并详解
网页设计中还有一种行为没有讨论，如果由于负外边距而导致元素彼此重叠，很难区分哪些元素在上面。你可能还会注意到，本节中所有例子都没有使用背景色。如果确实使用了背景色，其内容可能会被后面元素的背景色所覆盖，这是一种可以预见的行为，因为浏览器总会按从前到后的顺序显示元素，所以文档中后出现的正常流元素可能会覆盖较早出现的元素（如果这两个元素重叠），
网页设计中列表项有自身的一些特殊规则。这些列表项前面通常有一个标志，如一个圆点或一个数字。这个标志实际上并不是列表项内容区的一部分，所以如图7-25所示的效果很常见。
图7-25：列表项的内容
网站建设对这些标志相对于文档布局的放置和效果涉及很少，但网站建设引入了专门为解决这个问题而设计的一些属性，如marker-offset:。不过，光有想法但缺少实现，这就使得这个属性在CSS2.1中又被去掉了，很有可能CSS的将来版本还会引入另外一种方法来定义内容和标志之间的距离。因此，标志的放置不在创作人员的控制范围内（至少在写作本书时是这样）。
注意：第12章将更详细地研究列表及如何设置列表的样式。
网页设计中与一个列表项元素关联的标志可能在列表项内容之外，也可能处理为内容开始处的一个内联标志，这取决于属性list-style-position的值，如果标志放在内部，那么这个列表项相对于其相邻列表项就像一个块级元素一样，如图7-26所示。
图7-26：标志放在列表内部和外部
如果标志在内容之外，它会放在与内容左边界有一定距离的位置上（对于从左向右读的语言）。网页设计中不论如何改变列表的样式，标志与内容边界的距离都不变。有时，标志可能会放在列表元素本身之外，如图7-26所示。