上边距不保留在块元素内答案

【问题标题】：Top margin is not kept within the block element上边距不保留在块元素内
【发布时间】：2017-01-02 13:31:44
【问题描述】：

我正在阅读“HTML 和 CSS 设计和构建网站”，第 17 章中的示例之一是这样的：

http://www.htmlandcssbook.com/code-samples/chapter-17/example.html

我正在阅读本书中的 HTML/CSS，它大多是有意义的。我无法理解的是有点挑剔：使用chrome的开发人员工具并查看右下角的“Contact”，10px margin-top 值显示为超出包含部分块（class=“contact”细节”）。为什么 Contact 标题的上边距没有保留在内部分块中？或者更确切地说，为什么节块没有扩展以保留标题的所有内容？一个最小的例子：

<!DOCTYPE html>
<html>
    <head>
        <link href="example.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <aside>
            <section class="contact-details">
                <h2>Contact</h2>
            </section>
        </aside>
    </body>
</html>

CSS：

section, aside {
    display: block;
}

aside {
    width: 230px;
    border: 1px solid green;
}

aside h2 {
    border: 1px solid red;
    color: #fe6582;
    margin: 50px 0px 50px 0px;
}

我发现如果我在section 周围放置一个边框，那么问题就解决了（部分包含所有标题，包括其边距）。这是 HTML 特征还是 chrome 开发者工具的问题？

【问题讨论】：

标签： html css

【解决方案1】：

保证金问题实际上是一种指定的行为。

阅读here 了解更多关于边距折叠的信息。

另请阅读 this stackoverflow 以获得更好的解释。

【讨论】：