这是一个错误？ P元素的边距超出了容器的范围 [英] is it a bug? margins of P element go outside the containig div
问题描述
我在Ubuntu上使用Firefox3（而且我发现了SO中的一个bug，而在这个时候：-D）
预期的行为并不是在DIV之间看到任何的边距，而显示的是边距，源自P
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp ：//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< style>
p {
background-color：transparent;
margin：10px;
颜色：白色;
}
div {
background-color：black;
保证金：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>
这是CSS中定义的行为
$ b
8.3.1折叠页边距
在本规范中，表达式
的折叠边距意味着
的相邻边距（无填充或
边框区域将它们分开）或两个或
多个方框一个
另一个或嵌套）组合形成
的单个保证金。
在CSS2中，水平边距永远不会是
collapse。
纵向边距可能会在
特定框之间折叠： b
$ b
- 两个或更多个相邻正常流动中的块盒的垂直边缘塌陷。由此产生的边距宽度是相邻边距宽度的最大值。在负边际的情况下，负边缘的绝对最大值从正边缘的最大值中扣除。如果没有正边距，则负边距的绝对最大值将从零中扣除。
- 浮动框与其他框之间的垂直边距不会折叠。
$
$ b href =http://www.w3.org/TR/CSS2/box.html =noreferrer> http://www.w3.org/TR/CSS2/box.html p>
这个背后的基本原理可能是，如果你设置了一个（垂直）边界的东西，你只是想确保至少有这么多的空间之间的边界或这个元素的填充以及下一个元素的边框或者填充（例如两个段落）。
如果你想要在div中包含页边距展开），您需要在div的顶部和底部设置一些填充或边框。
I am using Firefox3 on Ubuntu (And I found a bug in SO while at that :-D) The expected behavior is not to see any margin between the DIVs, while a margin is shown, originating from the P margins.
<!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>
解决方案This is the behaviour as it is defined in the CSS box model:
8.3.1 Collapsing margins
In this specification, the expression collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
In CSS2, horizontal margins never collapse.
Vertical margins may collapse between certain boxes:
- Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero.
- Vertical margins between a floated box and any other box do not collapse.
- Margins of absolutely and relatively positioned boxes do not collapse.
http://www.w3.org/TR/CSS2/box.html
The rationale behind this might be, that if you set a (vertical) margin on something, you just want to ensure that there is at least this much space left between the border or padding of this element and the border or padding of the next element (e.g. two paragraphs).
If you want the margin to be contained in the div (i.e. making the div expand), you need to set some padding or border at the top and bottom of the div.
这篇关于这是一个错误？ P元素的边距超出了容器的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
