CSS 边距恐怖；边距在父元素之外添加空间

小编典典

CSS 边距恐怖；边距在父元素之外添加空间

all

我的 CSS 边距不符合我想要或期望的方式。我似乎我的页眉边距顶部会影响它周围的 div-tags。

这是我想要和期望的： 我想要的是....

…但这就是我最终的结果： 我得到什么...

资源：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>

<style type="text/css">
body {
    margin:0;
}
#page {
    margin:0;
    background:#FF9;
}
#page_container {
    margin:0 20px;
}
h1 {
    margin:50px 0 0 0;
}
</style>

</head>

<body>

<div id="page">
    <div id="page_container">
        <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
                <h2 id="site-description">Description</h2>
            </hgroup>
        </header>
    </div>
</div>

在这个例子中我夸大了边距。h1-tag 上的默认浏览器边距要小一些，在我的情况下，我使用 Twitter Bootstrap，使用
Normalizer.css 将默认边距设置为 10px。没那么重要，重点是；我不能，不应该，不想改变 h1-tag 上的边距。

我想这与我的另一个问题相似；为什么这种 CSS margin-top
样式不起作用？. 问题是我该如何解决这个特定问题？

我已经阅读了一些关于类似问题的主题，但没有找到任何真正的答案和解决方案。我知道添加padding:1px;或border:1px;解决问题。但这只会增加新的问题，因为我不想在我的
div 标签上添加填充或边框。

必须有更好的最佳实践解决方案吗？这一定很常见。

阅读 91

2022-07-17

共1个答案

小编典典

添加overflow:auto到您的#pagediv。

jsFiddle 示例

并在您使用时查看折叠边距。

2022-07-17