why is not margin collapning occur in this example

Question

What I don't really understand here is why margin collapse doesn't occur vertically between each definition list(dl). As you can see in style selector "#sweden dl" below I have set

margin:10px 20px; this mean margin-top and margin-bottom 10px for each dl and margin-left and margin-right 20px for each dl. So here we would have adjecent margins of 10px between margin-top and margin-bottom for the first dl and the same for the second dl.

When I run this in a browser it looks like the margin vertically between each dl and the margin besides each dl have the same width in this case 20px.

So according to margin collapse the verically margin between dl would only be 10px and not 20px as it looks now in the browser.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body
            {
                font-family:Arial, sans-serif;
                font-size:small;
                padding:0;
                margin:0;
            }

            #sweden
            {
                float:left;
                width:300px;
                padding:10px 0;
                margin:1px;
                border:2px solid #C8CDD2;
            }

            #sweden dl /* block element */
            {
                float:left;
                margin:10px 20px;
                padding:0;
                background:green;
            }

            #sweden dt   /* block element */
            {
               float:right;
                margin:0;
                padding:0;
                font-size:130%;
                letter-spacing:1px;
                color:#627081;
                width:162px;    
                background:blue;
            }

            #sweden dd
            {
               margin:0;  /*Will float around the image */
               font-size:85%;  
               line-height:1.5em;
               color:#666;
               background:red;
            }

            #sweden dd.img img
            {
               float:left;
               margin: 0 8px 0 0;
               padding:4px;
               border:1px solid #D9E0E6;
               border-bottom-color:#C8CDD2;
               border-right-color:#C8CDD2;
               background:#fff;
           }

           #sweden dl dd.img
           {
              margin:0;
              padding:0;
           } 
        </style>
    <meta charset="utf-8" />
    <title>Chapter 3</title>
    </head>
    <body>
   <div id="sweden">
          <dl>
             <dt>Stockholm</dt>
             <dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" alt="Gamla 
                Stan" /></dd>    
             <dd>This was taken in Gamla Stan.</dd>
          </dl>

          <dl class="alt">
             <dt>Gamla Uppsala</dt>
            <dd class="img"><img src="img/uppsala.jpg" width="80" height="80" alt="Gamla 
               Uppsala" /></dd>
            <dd>The first three Swedish kings are buried here, under ancient burial mounds. 
            </dd>
          </dl>

          <dl>
             <dt>Perpetual Sun</dt>
             <dd class="img"><img src="img/watch.jpg" width="80" height="80" 
                alt="Wristwatch" /></dd>
             <dd>During the summer months, the sun takes forever to go down. this is a good 
                thing.</dd>
          </dl>
       </div>
   </body>

//Tony

Sobin Augustine Sobin Augustine · Accepted Answer · 2013-08-17T10:26:29

do not have their margins collapsed: on floated element

The verically margin between dl will be 20px

by

margin-top:10px;
margin-bottom:10px;

use

margin:0px 20px 10px 20px;

why is not margin collapning occur in this example

1 Answers