无法真正理解为什么为 dd description 设置边距会得到结果答案

【问题标题】：can't really understand why setting a margin right for dd description will get the result as it does无法真正理解为什么为 dd description 设置边距会得到结果
【发布时间】：2013-08-14 17:32:31
【问题描述】：

在底部你有完整的标记。

如果我有保证金：0;在样式声明“#sweden dd”中，文本将围绕左浮动的图像。这很容易理解，但如果我更改“#sweden dd”中的边距样式所以而不是margin：0；我设置边距：0 0 0 98p；文本将在图像旁边排列成一列。

所以我真正无法理解的是，为什么当我指定 margin:0 0 0 98p; 时文本会排成一列？我知道我的边距样式中的最后一个数字是左边距，所以这不是问题。

//start markup causing text to surround the image that is float left
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body
            {
                font-family:Arial, sans-serif;
                font-size:small;
            }

            #sweden
            {
                float:left;
                width:300px;
                padding:10px 0;
                border:2px solid #C8CDD2;
                background:url(img/bg.gif)no-repeat top left;
            }

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

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

            #sweden dd
            {
                margin:0; /* This will surround the image with text */
               /* margin:0 0 0 98p; This will keep the text beside the image in a column. */
               padding:0;
               font-size:85%;  
               line-height:1.5em;
               color:#666;
               background:yellow;
           }

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

【问题讨论】：

请将您的代码保存在 jsfiddle.net 编辑器中，并将链接提供给我们，以便我们运行它并查看您的意思。

标签： html css margin

【解决方案1】：

如果您看到边距语法.. 它说 margin:top right bottom left..

所以这是您更新的瑞典 dd 代码希望这是您正在寻找的。p>

 #sweden dd
                {
                    /*margin:0;  This will surround the image with text */
                    margin:0 0 0 98px; /*This will keep the text beside the image in a column. */
                   padding:0;
                   font-size:85%;  
                   line-height:1.5em;
                   color:#666;
                   background:yellow;


               }

这里是 Demo

【讨论】：

【解决方案2】：

这就是 css 浮动的工作方式。

float CSS 属性指定一个元素应该取自正常流动并沿其左侧或右侧放置容器，其中文本和内联元素将环绕它。 (mozilla)

另一方面，当您应用 98px 的左边距时 -

由于边距，文本将不再环绕您的图像

【讨论】：

【解决方案3】：

在您的 HTML 代码中，您已将文本包装在元素 <dd> 中，您已将左边距设为 98。

请看http://jsfiddle.net/FmLjn/2/

<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. This was taken in Gamla Stan. 
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                           This was taken in Gamla. 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.This was taken in Gamla Stan.
                       </dd>
                   </dl>
               </div>

这意味着整个元素从父容器<div id='sweden'> 的左侧内侧被赋予 98px 的边距，结果显示为一列 - 这与浮动的内容无关（图像） .如果您希望图像和文本之间的间隙更大，而文本仍然环绕图像，则需要更改浮动元素本身的填充/边距，而不是环绕的文本。

请看这里：http://jsfiddle.net/q9rek/

【讨论】：

【解决方案4】：

在边距属性值中，使用98px 而不是98p。

Fiddle.

【讨论】：

这没什么好说的。你在说什么p？请注意，答案不应依赖于外部资源。
@JanDvorak 对不起。这样更好吗？