Question

我有一个填充的DIV（包含其他/子DIV和DL），然后是一些文字：

<div>    # the padded/main div

  <div>
    <div>
    </div>
  </div>
  <div>
    <dl>
      <dt></dt><dd></dd>
      <dt></dt><dd></dd>
    </dl>
  </div>

</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...

为什么主DIV底部没有填充？

（主div的内容与以下文本之间没有填充空格。）

感谢您对此提供的任何帮助！汤姆

Answer 1

您将填充与边距混淆。 margin是定义主div和底部文本之间空间的属性。

Answer 2

在您的示例中，您似乎尝试使用换行符在html中导致空格。这不行。如前面的答案中所述，您必须设置css margin-bottom属性以使spaec出现在div的bootom和下一个HTML元素的开头之后

Answer 3

如果你想使用填充而不是边距，那么改为添加一些方法来识别外部div（我使用了ID）：

   <div id="outerdiv">    # the padded/main div 
        <div> 
            <div> 
            </div> 
        </div> 
        <div> 
            <dl> 
                <dt></dt><dd></dd> 
                <dt></dt><dd></dd> 
            </dl> 
        </div> 
    </div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...

并添加CSS，例如：

#outerdiv
{
    padding-top: 1em;
    padding-bottom: 1em;
}

编辑：在这里看到它的工作：http://jsfiddle.net/yvaPG/

Answer 4

感谢您的快速提示！

我终于能够追踪问题：

<dd></dd>

元素有一个“float：left;”。这显然导致以下文本移动“左/上”。

我的解决方案：

我插了一个空的

<div></div>

带有“清楚：两者都有”;在dd元素和下面的文本之间。

如果有人有更优雅的解决方案，我仍然会感兴趣！

Answer 5

Tom更合理的方法是定义一个单独的CSS类;

.clearfix {clear:both; display:block;}

如果您在整个页面的其他位置需要它，那么这将允许您调用此div。只需更换with即可确保此更改始终如一，并且不会通过在整个页面/设置的其余部分中删除CSS重置来重置

此致

为什么这个<div>的填充不受尊重（在底部）？</div>

5 个答案: