0

这个问题只是为了尝试理解这个例子，它应该可以正常工作。我已经 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>

在这里提琴

4

2 回答 2

0 
#sweden dl dd.img

比更具体

#sweden dd

因此将应用第一个的边距。阅读有关CSS 优先级规则的更多信息以了解该问题。在这种特殊情况下，将应用第一个的边距。

于 2013-08-28T14:03:04.097 回答
0

#sweden dd中的边距规则没有得到应用，因​​为#sweden dl dd.img中的边距覆盖它并将其设置为 0。

于 2013-08-28T13:50:35.163 回答