0 
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

边距：10px 20px；这意味着每个 dl 的 margin-top 和 margin-bottom 10px，每个 dl 的 margin-left 和 margin-right 20px。所以在这里我们将在第一个 dl 的 margin-top 和 margin-bottom 之间有 10px 的相邻边距，对于第二个 dl 也是如此。

当我在浏览器中运行它时，看起来每个 dl 之间的垂直边距和每个 dl 之外的边距在这种情况下具有相同的宽度 20px。

因此，根据边距折叠，dl 之间的实际边距将仅为 10 像素，而不是现在在浏览器中看起来的 20 像素。

<!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>

//托尼

4

1 回答 1

0

不要让他们的边距折叠：在浮动元素上

dl 之间的垂直边距将为 20px

经过

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

利用

margin:0px 20px 10px 20px;
于 2013-08-17T10:26:29.180 回答