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

保证金：10px 20px;这意味着每个dl的每个dl和margin-left和margin-right 20px的margin-top和margin-bottom 10px。因此，对于第一个dl，我们将在margin-top和margin-bottom之间具有10px的adjecent边距，而对于第二个dl，我们将具有10px的adjecent边距。

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

因此，根据保证金的崩溃，dl之间的真正差距只有10px而不是20px，因为它现在在浏览器中看起来。

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

//托尼

Answer 1

没有折叠边距：浮动元素

dl之间的临界边距为20px

通过

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

使用

margin:0px 20px 10px 20px;

为什么在此示例中不会发生边缘折叠

1 个答案: