这是一个错误吗？ P 元素的边距超出了包含的 div答案

【问题标题】：is it a bug? margins of P element go outside the containig div这是一个错误吗？ P 元素的边距超出了包含的 div
【发布时间】：2010-10-15 17:14:00
【问题描述】：

我在 Ubuntu 上使用 Firefox3（当时我在 SO 中发现了一个错误 :-D）预期的行为是看不到 DIV 之间的任何边距，而显示一个边距，源自 P 边距。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <style>
        p{
            background-color: transparent;
            margin: 10px;
            color: white;
        }
        div{
            background-color: black;
            margin:0;
            width: 300px;
        }
   </style>
</head>
<body>
   <div>
        <p>aaaaaaaaaaa</p>
        <p>bbbbbbbbbbb</p>
        <p>ccccccccccc</p>
   </div> 
   <div>
        <p>aaaaaaaaaaa</p>
        <p>bbbbbbbbbbb</p>
        <p>ccccccccccc</p>
   </div> 
</body>
</html>

【问题讨论】：

我会帮助您展示一张图片，并花一些精力描述您希望看到的内容以及为什么您认为您看到的内容是一个错误。
您已经在 bugzilla 中提交了一个错误：bugzilla.mozilla.org/show_bug.cgi?id=485352 那么您的问题到底是什么？
我在另一个地方得到答案后提交了错误，没关系。
@Itay Moav 请不要同时在多个地方（bugzilla、so、unnamed）提问。你所做的只是倍增努力。你所做的很粗鲁，更何况你没有链接到其他问题。
你填得好吗？我可以随心所欲地问，我想要谁，想要多少次。谁让你做警察的？这个网站在我合作的任何其他网站上都没有优先权。

标签： html css firefox

【解决方案1】：

这是在 CSS 盒子模型中定义的行为：

8.3.1 折叠边距

在本规范中，表达式折叠边距意味着相邻边距（无填充或边界区域将它们分开）两个或更多的盒子（可能在一个旁边另一个或嵌套）结合形成一个单边距。

在 CSS2 中，水平边距从不崩溃。

垂直边距可能在某些盒子：

正常流崩溃中块框的两个或多个相邻垂直边距。生成的边距宽度是相邻边距宽度的最大值。在负边距的情况下，从正相邻边距的最大值中减去负相邻边距的绝对最大值。如果没有正边距，则从零中减去负相邻边距的绝对最大值。

浮动框与任何其他框之间的垂直边距不会折叠。

绝对和相对定位框的边距不会折叠。

http://www.w3.org/TR/CSS2/box.html

这背后的基本原理可能是，如果您在某物上设置（垂直）边距，您只想确保在该元素的边框或内边距与该元素的边框或内边距之间至少有这么多空间下一个元素（例如两个段落）。

如果你想让 div 中包含边距（即让 div 展开），你需要在 div 的顶部和底部设置一些填充或边框。

【讨论】：

至少对我来说“问题”很清楚，人们不知道 CSS 的边距折叠规则并不少见。
我已将问题编辑得更清楚......西蒙是对的。

【解决方案2】：

我刚刚在 Windows 上使用 FF 进行了检查，并且 p 元素按应有的方式包含在内，而不是在 div 之外。它在 IE7 上看起来也不错。

尝试在所有元素上设置边框，看看会发生什么。

抱歉，我无法提供更多帮助。

【讨论】：

包含 p 个元素，但尝试改变它们的边距：它会修改 div 之间的距离

【解决方案3】：

作为Simon Lehmann wrote，这是正确的行为。看起来您正在寻找的是p{padding:100px;}。

【讨论】：