Question

这个问题只是为了尝试理解这个例子，它可以正常工作。我在选择器margin:0 0 0 98px;上设置了这个样式#sweden dd 我想知道当我使用上述样式时图像保持其位置的原因在#sweden dd。我的意思是当我使用边缘时，它使用了周围的元素，因此在这种情况下98px的指定空间可以放在描述元素（dd）和图像之间。

这是完整的标记和css

<!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;
                border:2px solid #C8CDD2;
            }

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

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

            #sweden dd
            {
                padding:0;
                margin:0 0 0 98px; /*Keep text lined up in a column */
                font-size:85%;  
                line-height:1.5em;
                color:#666;
                background:red;
            }

            #sweden dl dd.img
            {
                margin:0;
                padding:0;
            }

            #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;
            }
        </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. This was taken in Gamla Stan. 
                    This was taken in Gamla Stan. This was taken in Gamla Stan. 
                    This was taken in Gamla Stan. This was taken in Gamla Stan. 
                    This was taken in Gamla Stan. This was taken in Gamla Stan. 
                    This was taken in Gamla Stan. This was taken in Gamla Stan. 
                    This was taken in Gamla Stan. This was taken in Gamla Stan</dd>
            </dl>
        </div>
    </body>
</html>

Fiddle here

Answer 1

#sweden dd 中的保证金规则未获得应用，因为 #sweden dl dd.img 中的边距会覆盖它并将其设置为0。

Answer 2

#sweden dl dd.img

比

更具体

#sweden dd

因此将应用第一个的保证金。阅读有关CSS priority rules的更多信息以了解该问题。在这种特殊情况下，将应用第一个边距。

当我使用margin-left时，为什么图像不受影响

2 个答案: