为什么在这个例子中没有发生边距折叠答案

【问题标题】：why is not margin collapning occur in this example为什么在这个例子中没有发生边距折叠
【发布时间】：2013-08-19 16:59:05
【问题描述】：

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。

因此，根据margin collapse，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>

//托尼

【问题讨论】：

标签： html version-control

【解决方案1】：

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

dl 之间的垂直边距为 20px

通过

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

使用

margin:0px 20px 10px 20px;

【讨论】：

但是你在 margin-top 和 margin-bottom 之间有 10px 的相邻边距，所以你为什么不得到 10px。这就是相邻边距折叠的工作原理。
也就是说，第一个的边距底部（10px）+第二个的边距顶部（10px）给你一个20像素的组合边距
所以根据我的说法，由于边距崩溃，我们只会得到 10px 的边距。你知道我说的边距崩溃是什么意思吗？
例如，如果你有这个标记
one

two

three
这种样式为 p { margin:10px 0;你会在 p 而不是 20px 之间得到 10px
还有其他情况下元素的边距没有折叠：浮动元素绝对定位元素内联块元素溢出设置为可见以外的任何元素（它们不会与子元素折叠边距。）已清除的元素（它们的上边距不会与其父块的下边距一起折叠。）根元素