Question

据我所知，CSS中框的高度是内容的高度，不包括边距和填充，但为什么使用此示例，如果取消注释包含div中的border：line，则会显示背景颜色div延伸到第一段之上，而如果你没有边框，它不会？

<html>
<head>
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
    <title></title>
    <style type="text/css">
        #container {
            background-color: green;
            /* border: black solid 1px; */
        }

        p { background-color: red;
            margin-top:50px;
            margin-bottom: 0px;
            border: black dotted 3px;
          }
    </style>
</head>
<body>
<div id="container">
    <p>first paragraph</p>
    <p>second paragraph</p>
</div>  
</body>
</html>

Answer 1

据我所知，CSS中框的高度是内容的高度，不包括边距和填充

错误：包含填充和边框（由于bug而在Microsoft Internet Explorer中除外，现在出于兼容性原因（如果使用quirks模式渲染））。阅读CSS box model：

内容边缘围绕由框的宽度和高度给出的矩形

其中内容边缘是围绕边界外部运行的边缘。

Answer 2

@aizuchi，

你的第一个CSS有错误。检查“pic”到“margin-bottom”。

第二个添加“溢出：隐藏;”到#container元素，一旦你没有设置父元素的siez，你必须有这个标记来告诉父母使用哪个大小。它会使#container在它自己的（#container）使用子元素的高度，除了“pic”之外，这可能是你CSS中的问题。

首先，IE6中的Google box模型bug了解我们的“心爱”ie6和其他浏览器之间的区别。

总之

最好使用

<LINK rel="StyleSheet" href="style.css" type="text/css" media="screen" />

而不是

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

Answer 3

边距位于边框外侧，填充位于边框内侧，因此上边距会导致边距位于边框上方。如果你想在段落和边框之间填充使用填充而不是边距。 div的大小将由边距，填充和边框决定。他们都将贡献div的大小。

为什么边框会影响CSS中的包含块大小？

3 个答案: