It's clear why the margin collapses to 20px in the first example when there's a border on the outer div.
However, it is puzzling how the margin collapses to zero in the second example just by removing the border from the outer div.
/*First example*/
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>"float: left" with no width set</title>
<style type="text/css" media="screen">
body {
padding: 0;
margin: 1px;
}
</style>
</head>
<body>
<div style="background-color: yellow; border: solid 1px #ccc;">
<div style="margin: 20px; background-color: red;">
<p style="margin: 20px; color:#fff; background-color: blue;">A paragraph
with a 20px margin inside a div, also with a 20px margin</p>
</div>
</div>
</body>
</html>
/*Second example without a border on the outer div */
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>"float: left" with no width set</title>
<style type="text/css" media="screen">
body {
padding: 0;
margin: 1px;
}
</style>
</head>
<body>
<div style="background-color: yellow;">
<div style="margin: 20px; background-color: red;">
<p style="margin: 20px; color:#fff; background-color: blue;">
A paragraph with a 20px margin inside a div, also with a 20px margin
</p>
</div>
</div>
</body>
</html>
//Tony