我的 css 边距不符合我想要或期望的方式。我的页眉边距顶部似乎影响了它周围的 div 标签。
这就是我想要和期待的:
...但这就是我最终得到的:
来源:
<!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标签上的边距。
我想这和我的另一个问题类似; 为什么这个 CSS margin-top 样式不起作用?。问题是我该如何解决这个具体问题?
我已经阅读了一些关于类似问题的线程,但还没有找到任何真正的答案和解决方案。我知道添加
padding:1px;
或 border:1px;
可以解决问题。但这只会增加新的问题,因为我不想在我的 div 标签上添加填充或边框。
必须有更好的最佳实践解决方案?这一定很常见。
添加以下任一规则:
float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;
这是
collapsing margins
造成的。请参阅有关此行为的文章here.
根据文章:
W3C 规范定义折叠边距如下:
“在本规范中,折叠边距的表达是指两个或多个框(可能彼此相邻或嵌套)的相邻边距(没有非空内容、填充或边框区域,或间隙分隔它们)合并到形成单一边距。”
父子元素也是如此
所有答案都包含其中一种可能的解决方案:
还有其他情况下元素没有折叠边距:
- 浮动元素
- 绝对定位元素
- 行内块元素
- 溢出设置为可见以外的任何元素(它们不会与孩子折叠边距。)
- 已清除的元素(它们不会将其上边距与其父块的下边距折叠起来。)
- 根元素
问题是父母没有考虑孩子的身高。添加
display:inline-block;
对我有用。
完整的 CSS
#page {
margin:0;
background:#FF9;
display:inline-block;
width:100%;
}
只需将
border-top: 1px solid transparent;
添加到您的#page
元素中。
两个边距相邻当且仅当:
- 没有线框,没有间隙,没有填充,也没有边框分隔它们
添加以下规则:
overflow: hidden;
这是由边缘崩溃引起的。请参阅有关此行为的文章here.
根据文章:
如果父元素没有任何顶部填充或顶部边距小于其第一个子元素,则元素的呈现方式使父元素看起来具有子元素的边距。所以这可能发生在满足这些条件的页面上的任何地方,但它往往在页面顶部最明显。
其他答案中的解决方案对我不起作用。透明边框、inline-block 等,都导致了其他问题。相反,我将以下 css 添加到我的祖先元素中:
parent::after{
content: "";
display: inline-block;
clear: both;
}
根据您的情况,这可能会导致其自身的问题,因为它会在最后一个子元素之后添加额外的空间。
我在为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);}