CSS边缘恐怖; 边距在父元素之外添加空格
jam*_*lin 128 html css margin overflow
我的css边距不符合我想要或期望的方式.我好像我的标题margin-top会影响它周围的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标签上的边距.
我想这跟我的其他问题类似; 为什么这种CSS margin-top风格不起作用？.问题是我该如何解决这个具体问题？
我已经阅读了类似问题的几个主题,但没有找到任何真正的答案和解决方案.我知道添加padding:1px;或border:1px;解决问题.但这只会增加新的问题,因为我不希望在div标签上有填充或边框.
必须有更好的最佳实践解决方案吗？这一定很常见.
j08*_*691 183
添加overflow:auto到您的#pagediv.
当你在它时,检查崩溃的边缘.
- 溢出:隐藏; 在我的场景中,我也为我工作并为我做得更好. (4认同)
- 这样可行.在这里找到大量的例子(http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html)以及一些很好的解释.没有解决方案真的100%令人满意.但我想只需要忍受它,保证金必须以这种方式工作或文本格式化是不可能的.99%的时间可以根据需要使用.但在设计布局时,时不时会出现问题.:P (3认同)
- 折叠边距的定义看起来非常复杂（有很多规则，有很多例外），它有什么用？ (3认同)
- 父容器上的“display: flex”和“flex-direction: column”也有同样的效果。 (3认同)
Zia*_*rno 35
添加以下任一规则:
float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;
这是由collapsing margins.在此处查看有关此行为的文章.
根据这篇文章:
W3C规范定义了折叠边距如下:
"在本规范中,表达式折叠边距意味着两个或多个框(可能彼此相邻或嵌套)的相邻边距(没有非空内容,填充或边框区域或间隙将它们分开)组合形成一个保证金."
父子元素也是如此.
所有答案都包括一个可能的解决方案:
在其他情况下,元素的边距不会折叠:
- 浮动的元素
- 绝对定位的元素
- 内联块元素
- 溢出设置为除可见之外的任何元素(它们不会与子项一起折叠边距.)
- 已清除的元素(它们不会使用其父块的下边距折叠其顶部边距.)
- 根元素
- `clear: <any option>` 似乎不起作用，其他解决方案适用于 Google Chrome (3认同)
jon*_*izh 14
问题是父母没有考虑儿童身高.添加display:inline-block;为我做了.
完整的CSS
#page {
margin:0;
background:#FF9;
display:inline-block;
width:100%;
}
小智 5
添加以下规则：
overflow: hidden;
这是由边距塌陷引起的。请参阅此处有关此行为的文章。
根据这篇文章：
如果父元素没有任何顶部填充或上边距小于其第一个子元素，则元素的渲染方式将使父元素看起来具有子元素的边距。因此，这种情况可能发生在页面上满足这些条件的任何位置，但往往在页面顶部最为明显。
| 归档时间： |
|
| 查看次数： |
66345 次 |
| 最近记录： |