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

Question

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

我在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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sim*_*ann 14

这是在CSS框模型中定义的行为:

8.3.1折叠边距

在本说明书中,表达式折叠边距意味着两个或更多个框(可以彼此相邻或嵌套)的相邻边距(没有填充或边界区域将它们分开)组合形成单个边距.

在CSS2中,水平边距永远不会崩溃.

某些框之间的垂直边距可能会崩溃:

正常流动中的两个或多个相邻的块箱垂直边缘坍塌.得到的边距宽度是相邻边距宽度的最大值.在负边距的情况下,负邻接边距的绝对最大值从正相邻边距的最大值中扣除.如果没有正边距,则负相邻边距的绝对最大值将从零中扣除.

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

绝对和相对定位的盒子的边缘不会崩溃.

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

这背后的基本原理可能是,如果你在某个东西上设置(垂直)边距,你只需要确保在该元素的边框或填充与下一个元素的边框或填充之间至少留有这么多空间. (例如两段).

如果您希望将余量包含在div中(即使div扩展),则需要在div的顶部和底部设置一些填充或边框.

归档时间：	17 年，3 月前
查看次数：	2433 次
最近记录：	17 年，3 月前