187

我的 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 标签上添加填充或边框。

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

4

8 回答 8

251

添加overflow:auto到您的#pagediv。

jsFiddle 示例

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

于 2012-11-26T21:49:28.433 回答
57

添加以下任一规则：

float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;

这是由collapsing margins. 在此处查看有关此行为的文章。

根据这篇文章：

W3C 规范定义折叠边距如下：

“在本规范中，折叠边距表示两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有非空内容、填充或边界区域或间隙分隔它们）组合形成一个边距。”</p>

对于父子元素也是如此。

所有答案都包括一种可能的解决方案：

在其他情况下，元素的边距没有折叠：

  • 浮动元素
  • 绝对定位元素
  • 行内块元素
  • 溢出设置为可见以外的任何元素（它们不会与子元素一起折叠边距。）
  • 清除的元素（它们不会用其父块的底部边距折叠顶部边距。）
  • 根元素
于 2017-02-06T14:09:15.053 回答
22

问题是父母没有考虑孩子的身高。添加display:inline-block;为我做了。

完整的 CSS

#page {
    margin:0;
    background:#FF9;
    display:inline-block;
    width:100%;
}

见小提琴

于 2012-11-26T21:51:13.030 回答
3

只需添加border-top: 1px solid transparent;到您的#page元素。

来自 w3.org

两个边距相邻当且仅当：
- 没有行框、没有间隙、没有填充和没有边框将它们分开

于 2018-10-30T01:45:08.577 回答
2

添加以下规则：

overflow: hidden;

这是由于边距塌陷造成的。在此处查看有关此行为的文章。

根据这篇文章：

如果父元素没有任何顶部填充或小于其第一个子元素的顶部边距，则元素的渲染方式使父元素看起来具有子元素的边距。因此，这可能发生在满足这些条件的页面上的任何位置，但它往往在页面顶部最为明显。

于 2020-05-03T09:32:13.043 回答
0

其他答案中的解决方案对我不起作用。透明边框、inline-block 等，都会引起其他问题。相反，我将以下 css 添加到我的祖先元素中：

parent::after{
  content: "";
  display: inline-block;
  clear: both;
}

根据您的情况，这可能会导致其自身的问题，因为它在最后一个子元素之后添加了额外的空间。

于 2018-11-26T22:15:34.573 回答
0 
#page {
overflow: hidden;
margin:0;
background:#FF9;
}
于 2020-05-03T11:52:36.893 回答
0

我为 XenForo 2.1 制作样式时的方法，但它应该对您有用：（请将这些 LESS 变量替换为您的实际值。此外，小边距的绝对值应与前后伪的高度相同元素。）

// The following two lines are to avoid top & bottom fieldset borders run out of the block body.
// (Do not tweak the CSS overflow settings, otherwise the editor menu won't be float above the block border.)
&:before {content: "\a0"; display: block; width: auto; margin-bottom: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall - @xf-borderSizeMinorFeature);}
&:after {content: "\a0"; display: block; width: auto; margin-top: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall - @xf-borderSizeMinorFeature);}
于 2020-05-15T02:02:55.270 回答