How to collapse next to positive and negative margins

**sedigh mohseni** · Nov 5 '11, 11:36 AM

Hi

I have a problem in grasp of collapsing next to positive and negative margins , would you please desribe me what happened and how several next to margins that some of them are negative and some are positive are collapsed?

For example in this situation
Can anyone explain this example for me?

Code:

<html>
<head>
<title>test page</title>
<style type="text/css">
li {margin-bottom: 20px;}
ul {margin-bottom: -15px;}
h1 {margin-top: -18px;}
</style>
</head>

<body>
<ul>
<li>first li</li>
<li>second li</li>
<li>third li</li>
</ul>
<h1>this is a division this is a division</h1>
</html>

It's nice of you to help me , thanks alot.