Question

我的html代码（见下文）主要由嵌套在p父级中的article子代组成。这段是article的唯一孩子。向p子项'添加边框'大幅度'更改article父级的高度。我使用Firefox 36。

CSS元素检查显示：

p孩子周围没有边框，p孩子的上边距和下边距 parent;
{/ 1}}孩子周围有边框，p孩子的上边距和下边距 p。

我的问题是：“为什么带有边框的parent孩子完全包括填充，边框和边距---包裹在其父级和p儿童之间没有边框？”

我有以下html：

以下CSS：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title> White space problem </title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
    <nav>
        Menubar items
    </nav>
    <article>
        <p>
            The CSS border properties allow you to specify the style, size, and color of an element's border.
        </p>
    </article>
    <footer>
        This is the footer
    </footer>
</body>
</html>

注意文章nav { background: #ddddff; padding: 10px; margin: 0px; } article { background: #ddffdd; padding: 0px; margin: 0px; // border: 1px solid black; } p { padding: 0px; margin: 10px; } footer { background: #ffdddd; padding: 10px; margin: 0px; }属性 - 值对已被注释掉。浏览器（Firefox 36）在border和nav之间以及article和article之间输出10px宽的空白区域;此空白区域为10px footer边距。 [p的身高是40像素。]

https://www.dropbox.com/s/jvaqjcrh56lg40m/NoBorder.JPG?dl=0

为article子项添加边框，从而在CSS文件中取消注释p，会得到以下结果：

https://www.dropbox.com/s/oivjsibzm2om1yt/Border.JPG?dl=0

没有空间。 [border: 1px solid black;的高度现在为62px = 40px + 2 x 1px边框+ 2 x 10px边距。]

为了清楚起见：我的问题不是要删除空格，而是根据article孩子是否有边框来改变文章尺寸的原因。这似乎与我不一致。

Answer 1

作为一种快速解决方案，您可以在边框的步伐中使用轮廓

outline: 1px solid black;

Answer 2

在您的示例中，您要将边框添加到article，而不是p。由于p元素的边距为10px，因此会在其上方和下方产生空白。当article应用了border时，子项（在这种情况下为p）上/下边缘被定义为与父项相同，因此背景填满的原因..无论如何，这就是我的理解，如果我出错了，请随时纠正我。

向子项添加边框会更改css中的父级维度

2 个答案: