子元素的边距移动父元素 [英] Margin on child element moves parent element

问题描述

我有一个 div(父)，其中包含另一个 div(子).父元素是 body 中的第一个元素，没有特定的 CSS 样式.当我设置

.child{边距顶部:10px；}

最终结果是我的孩子的顶部仍然与父母对齐.我的父母没有将孩子向下移动 10 像素，而是向下移动 10 像素.

我的 DOCTYPE 设置为 XHTML Transitional.

我在这里遗漏了什么?

编辑 1
我的父母需要有严格定义的尺寸，因为它有一个背景，必须从上到下显示在它下面(像素完美).因此，在其上设置垂直边距是不行.

编辑 2
此行为在 FF、IE 和 CR 上相同.

解决方案

在 在 DIV 中带有边距的子元素 您还可以添加:

.parent { 溢出:自动；}

或:

.parent { 溢出:隐藏；}

这可以防止边距折叠.边框和填充做同样的事情.因此，您还可以使用以下方法来防止顶部边距崩溃:

.parent {填充顶部:1px；边距顶部:-1px；}

2021 更新:如果您愿意放弃 IE11 支持，您还可以使用新的 CSS 结构显示:流根.请参阅 MDN Web Docs 了解有关块格式的全部详细信息上下文.

---

应大众要求更新:折叠边距的全部意义在于处理文本内容.例如:

h1, h2, p, ul {边距顶部:1em；底边距:1em；轮廓:1px 蓝色虚线；}div { 轮廓:1px 纯红色；}

<h1>Title!</h1><div class="text"><h2>标题！</h2><p>段落</p>

<div class="text"><h2>标题！</h2><p>段落</p><ul><li>列表项</li>

因为浏览器折叠边距，文本会如您所愿地显示，并且 <div> 包装标签不会影响边距.每个元素确保它周围有间距，但间距不会加倍.<h2> 和 的边距不会相加，而是相互滑动(它们会折叠起来).

和

元素也是如此.

遗憾的是，对于现代设计，当您明确想要一个容器时，这个想法可能会让您感到厌烦.这在 CSS 中称为新的块格式上下文.overflow 或边距技巧将为您提供.

I have a div (parent) that contains another div (child). Parent is the first element in body with no particular CSS style. When I set

.child
{
    margin-top: 10px;
}

The end result is that top of my child is still aligned with parent. Instead of child being shifted for 10px downwards, my parent moves 10px down.

My DOCTYPE is set to XHTML Transitional.

What am I missing here?

edit 1
My parent needs to have strictly defined dimensions because it has a background that has to be displayed under it from top to bottom (pixel perfect). So setting vertical margins on it is a no go.

edit 2
This behaviour is the same on FF, IE as well as CR.

解决方案

Found an alternative at Child elements with margins within DIVs You can also add:

.parent { overflow: auto; }

or:

.parent { overflow: hidden; }

This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

2021 update: if you're willing to drop IE11 support you can also use the new CSS construct display: flow-root. See MDN Web Docs for the whole details on block formatting contexts.

---

Update by popular request: The whole point of collapsing margins is handling textual content. For example:

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>

Because the browser collapses margins, the text would appear as you'd expect, and the <div> wrapper tags don't influence the margins. Each element ensures it has spacing around it, but spacing won't be doubled. The margins of the <h2> and <p> won't add up, but slide into each other (they collapse). The same happens for the <p> and <ul> element.

Sadly, with modern designs this idea can bite you when you explicitly want a container. This is called a new block formatting context in CSS speak. The overflow or margin trick will give you that.

这篇关于子元素的边距移动父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！