Html 为什么我使用左边距时图像不受影响_Html_Css

Html 为什么我使用左边距时图像不受影响

html css

Html 为什么我使用左边距时图像不受影响,html,css,Html,Css,这个问题只是试图理解这个例子，它应该是这样的。我已经设置了这个样式margin:098px瑞典dd 我想知道当我使用上面的样式时，为什么图像可以保持它的位置关于#瑞典dd。我的意思是，当我使用margin时，它会将周围的元素推开，这样在本例中，指定的空间98px可以放在description元素（dd）和图像之间下面是完整的标记和css <!DOCTYPE html> <html> <head> <style type="t

这个问题只是试图理解这个例子，它应该是这样的。我已经设置了这个样式

margin:098px瑞典dd
我想知道当我使用上面的样式时，为什么图像可以保持它的位置
关于#瑞典dd
。我的意思是，当我使用margin时，它会将周围的元素推开，这样在本例中，指定的空间98px可以放在description元素（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>


身体
{
字体系列：Arial，无衬线；
字体大小：小；
填充：0；
保证金：0；
}
#瑞典
{
浮动：左；
宽度：300px；
填充：10px0；
边框：2px实心#C8CDD2；
}
#瑞典dl/*块元素*/
{
浮动：左；
利润率：10px 20px；
填充：0；
}
#瑞典dt/*块元素*/
{
浮动：对；
宽度：162px；
保证金：0；
填充：0；
字体大小：130%；
字母间距：1px；
颜色：#627081；
背景：蓝色；
}
#瑞典dd
{
填充：0；
边距：0 98px；/*使文本在列中保持对齐*/
字号：85%；
线高：1.5em；
颜色：#666；
背景：红色；
}
#瑞典dl dd.img
{
保证金：0；
填充：0；
}
#瑞典dd.img img
{
浮动：左；
利润率：0.8px 0.0；
填充：4px；
边框：1px实心#D9E0E6；
边框底色：#C8CDD2；
右边框颜色：#C8CDD2；
背景：#fff；
}
第三章
斯德哥尔摩
这是在Gamla Stan拍摄的。这是在Gamla Stan拍摄的。
这是在Gamla Stan拍摄的。这是在Gamla Stan拍摄的。
这是在Gamla Stan拍摄的。这是在Gamla Stan拍摄的。
这是在Gamla Stan拍摄的。这是在Gamla Stan拍摄的。
这是在Gamla Stan拍摄的。这是在Gamla Stan拍摄的。
这是在Gamla Stan拍摄的。这是在Gamla Stan拍摄的

您在#瑞典dd中的保证金规则未被应用，因为#瑞典dl dd.img中的保证金正在覆盖该规则并将其设置为0
#sweden dl dd.img

比
#sweden dd

因此，将应用第一个的裕度。阅读更多关于了解问题的信息。在这种特殊情况下，将应用第一个的边距。
不，您错了！请看这里，将应用选择器“#瑞典dd”的边距，但对于那些具有指定img的类且存在于dl元素下面的dd元素，将使用此样式。我认为您错了！请看这里，将应用选择器“#瑞典dd”的边距，但对于指定了class=img且存在于dl元素下方的dd元素，将使用此样式。我想你明白我的意思。在这两种情况下，dd都是#sveden的后代。第一种方法适用于所有地方，因为它比第二种方法更具体。如果dd具有img类，则第二个的边距将被第一个的边距覆盖。因此，我们可以放心地说，在dd具有img类的情况下，#sweden dd的margin属性将被#sweden dl dd.img的margin属性覆盖。我的意思是，第一个和第二个选择器并不总是针对同一个元素。第一个不以没有class=img的元素dd为目标。我是这样理解的。当我们有一个class=img的dd元素时，使用第一个选择器，当dd没有img类时，使用第二个选择器。事实上，如果img类存在，则使用这两个选择器，但如果两个规则定义同一属性的值，则将考虑具有更高优先级的规则的值。