为什么不尊重此 <DIV> 的填充（在底部）？答案

【问题标题】：Why is the padding of this <DIV> not respected (at the bottom)?为什么不尊重此 <DIV> 的填充（在底部）？
【发布时间】：2012-03-05 09:34:36
【问题描述】：

我有一个填充的 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 的内容和后面的文本之间没有填充空间。）

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

【问题讨论】：

您没有显示您的 CSS 代码。我们需要看到这一点才能给您一个好的答案。

标签： css html padding

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

感谢您的快速提示！

我终于找到了问题所在：

<dd></dd>

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

我的解决方案：

我插入了一个空的

<div></div>

带有“clear:both;”在 dd 元素和以下文本之间。

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

【讨论】：

使用 CSS 而不是新的标记元素可能会更好地解决这个问题，因为进行维护的人可能不理解额外“似乎未使用”div 的原因。
好吧，我尝试分配一个“clear:both;”到父 DIV（这会更有意义），但它不会有相同的效果......

【解决方案5】：

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

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

如果您在整个页面的其他地方需要它，这将允许您调用此 div。只需将替换为以确保此更改在整个过程中持续进行，并且不会通过在整个页面/设置的其余部分中删除 CSS 重置来重置

问候

【讨论】：