我有一个 div
(parent)包含另一个 div
(child)。 Parent 是 body
中的第一个元素,没有特定的 CSS 样式。当我设置
.child
{
margin-top: 10px;
}
最终结果是我的 child 的顶部仍然与 parent 对齐。我的 parent 向下移动了 10 像素,而不是 child 向下移动 10 像素。
我的 DOCTYPE
设置为 XHTML Transitional
。
我在这里错过了什么?
编辑 1
我的 parent 需要严格定义尺寸,因为它有一个必须从上到下显示在其下方的背景(像素完美)。因此,在其上设置垂直边距是不行的。
编辑 2
此行为在 FF、IE 和 CR 上相同。
最佳答案
在 Child elements with margins within DIVs 找到替代方案您还可以添加:
.parent { overflow: auto; }
或:
.parent { overflow: hidden; }
这可以防止边距变为 collapse .边框和填充做同样的事情。 因此,您还可以使用以下方法来防止 top-margin 崩溃:
.parent {
padding-top: 1px;
margin-top: -1px;
}
2021 年更新:如果你愿意 drop IE11 support您还可以使用新的 CSS 构造 display: flow-root
.参见 MDN Web Docs有关 block 格式化上下文的全部详细信息。
根据大众要求更新: 折叠边距的全部意义在于处理文本内容。例如:
h1, h2, p, ul {
margin-top: 1em;
margin-bottom: 1em;
outline: 1px dashed blue;
}
div { outline: 1px solid red; }
<h1>Title!</h1>
<div class="text">
<h2>Title!</h2>
<p>Paragraph</p>
</div>
<div class="text">
<h2>Title!</h2>
<p>Paragraph</p>
<ul>
<li>list item</li>
</ul>
</div>
因为浏览器折叠边距,文本会如您所愿地显示,并且 <div>
包装标签不影响边距。每个元素都确保它周围有间距,但间距不会加倍。 <h2>
的边距和 <p>
不会加起来,而是会相互滑入(它们会坍塌)。 <p>
也是如此和 <ul>
元素。
遗憾的是,在现代设计中,当您明确想要一个容器时,这种想法可能会影响您。这称为新的 block formatting context用 CSS 来说。 overflow
或 margin 技巧会给你。
关于css - 子元素上的边距移动父元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1762539/