Question

我正在阅读＆＃34; HTML和CSS设计和构建网站＆＃34;，第17章中的一个例子是：

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

我正在阅读本书中的HTML / CSS，这大部分都是有道理的。我无法理解的是一点点挑剔：使用chrome的开发工具并查看＆＃34; Contact＆＃34;在右下方，10px margin-top值显示为超出包含区块（类=＆＃34;联系方式＆＃34;）。为什么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开发人员工具的问题？

Answer 1

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

详细了解保证金崩溃的here。

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

上边距不在块元素内

1 个答案: