When IE should collapse a margin betwee two elements because an element between the two get deleted, it sometimes fails to do so, and simply *delete* the margins. The margins reappears when we force IE to restyle the DOM by pressing CTRL+A.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TD/html4/strict.dtd"><html> <head> <title>Test HTML : Collapsing margin while deleting elements</title> <style><!-- .box { border: 5px solid black; padding: 0px; width: 500px; background: #223322; text-align: center; margin: 10px 0px; } .first, .last { background: green; height: 20px; color: white; font-weight: bold; } .first { margin-bottom: 30px; } .last { margin-top: 30px; } --></style> </head> <body> Green boxes and black boxes should never share a border. <br/><br/> <div class="box"> <div class="first">First</div> <input type="button" onclick="this.parentNode.removeChild(this)" value="Delete me!" /> <div class="last">Last</div> </div> <div class="box"> <div class="first">First</div> <center> <input type="button" onclick="this.parentNode.parentNode.removeChild(this.parentNode)" value="Delete me!" /> </center> <div class="last">Last</div> </div> <div class="box"> <div class="first" style="border-bottom: 1px solid lime">First</div> <center> <input type="button" onclick="this.parentNode.parentNode.removeChild(this.parentNode)" value="Delete me!" /> </center> <div class="last" style="border-top: 1px solid lime">Last</div> </div> </body></html>