<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html lang="en"> <head> <title>Margin Collapsing: negative margins (easy)</title> <style type="text/css"> .container { background: red; height: auto; border: 1em lime solid; } .a { margin-top: -1em; margin-bottom: 1em; } .b { margin-top: 1em; margin-bottom: 1em; } .c { margin-top: 1em; margin-bottom: 1em; } .d { margin-top: 1em; margin-bottom: 1em; } .e { margin-top: 1em; margin-bottom: 1em; } .f { margin-top: 1em; margin-bottom: 1em; } </style> </head> <body> <p>There should be no red below.</p> <div class="container"> <div class="a"> <div class="b"> </div> <div class="c"> </div> </div> <div class="d"> <div class="e"> </div> <div class="f"> </div> </div> </div> </body> </html>