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?
Expand|Select|Wrap|Line Numbers
- <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>