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