CSS 子元素的边距移动父元素

Margin on child element moves parent element

提问by Robert Koritnik

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

我有一个div（父）包含另一个div（子）。父元素是第一个body没有特定 CSS 样式的元素。当我设置

.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.

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

My DOCTYPEis set to XHTML Transitional.

我DOCTYPE的设置为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.

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

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

编辑 2
这种行为在 FF、IE 和 CR 上是相同的。

回答by vdboor

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

在 DIV 内有边距的子元素中找到了替代方案您还可以添加：

.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;
}

---

---

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;
}

<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.

由于浏览器折叠边距，文本将如您所愿显示，并且<div>包装标签不会影响边距。每个元素确保它周围有间距，但间距不会加倍。的边距<h2>，并<p>不会增加，但陷入对方（他们崩溃）。同样的情况在<p>和<ul>元素。

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

可悲的是，对于现代设计，当您明确想要一个容器时，这个想法可能会咬你。这在 CSS 中称为新的块格式上下文。该overflow或保证金招会给你的。

回答by Ben James

This is normal behaviour (among browser implementations at least). Margin does not affect the child's position in relation to its parent, unless the parent has padding, in which case most browsers will then add the child's margin to the parent's padding.

这是正常行为（至少在浏览器实现中）。边距不会影响子元素相对于其父元素的位置，除非父元素有填充，在这种情况下，大多数浏览器会将子元素的边距添加到父元素的填充中。

To get the behaviour you want, you need:

要获得您想要的行为，您需要：

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

回答by Ejaz

Although all of the answers fix the issue but they come with trade-offs/adjustments/compromises like

虽然所有的答案都解决了这个问题，但它们都伴随着权衡/调整/妥协，比如

• floats, You haveto float elements
• border-top, This pushes the parent at least 1px downwards which should then be adjusted with introducing -1pxmargin to the parent element itself. This can create problems when parent already has margin-topin relative units.
• padding-top, same effect as using border-top
• overflow: hidden, Can't be used when parent should display overflowing content, like a drop down menu
• overflow: auto, Introduces scrollbars for parent element that has (intentionally) overflowing content (like shadows or tool tip's triangle)

• floats, 你必须浮动元素
• border-top, 这会将-1px父元素向下推至少 1px，然后应该通过向父元素本身引入边距来进行调整。当父级已经具有margin-top相对单位时，这可能会产生问题。
• padding-top, 效果与使用相同 border-top
• overflow: hidden, 当父级应该显示溢出内容时不能使用，如下拉菜单
• overflow: auto, 为具有（故意）溢出内容（如阴影或工具提示的三角形）的父元素引入滚动条

The issue can be resolved by using CSS3 pseudo elements as follows

这个问题可以通过使用 CSS3 伪元素来解决，如下所示

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

https://jsfiddle.net/hLgbyax5/1/

回答by Атанас Димитров

add style display:inline-blockto child element

display:inline-block为子元素添加样式

回答by George SEDRA

the parent element has not to be empty at least put  before the child element.

父元素至少不能为空，至少放在 子元素之前。

回答by erdomester

This is what worked for me

这对我有用

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

http://jsfiddle.net/97fzwuxh/

回答by vincent thorpe

I find out that, inside of your .css >if you set the display propertyof a div element to inline-blockit fixes the problem. and margin will work as is expected.

我发现，在你的 .css 中，如果你将div 元素的display 属性设置为inline-block它可以解决这个问题。保证金将按预期工作。

回答by Yeti

Neat CSS-only solution

纯 CSS 解决方案

Use the following code to prepend a contentless first-child to the unintentionally moving div:

使用以下代码将无内容的第一个孩子添加到无意移动的 div：

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

The advantage of this method is that you do not need to change the CSS of any existing element, and therefore has minimal impact on design. Next to this, the element that is added is a pseudo-element, which is notin the DOM-tree.

这种方法的优点是您不需要更改任何现有元素的 CSS，因此对设计的影响最小。接下来，添加的元素是一个伪元素，它不在DOM 树中。

Support for pseudo-elements is wide-spread: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, and IE 8+. This will work in any modern browser (be careful with the newer ::before, which is not supported in IE8).

对伪元素的支持非常广泛：Firefox 3+、Safari 3+、Chrome 3+、Opera 10+ 和 IE 8+。这将适用于任何现代浏览器（请注意较新的::beforeIE8 不支持）。

Context

语境

If the first child of an element has a margin-top, the parent will adjust its position as a way of collapsing redundant margins. Why? It's just like that.

如果元素的第一个子元素有margin-top，则父元素将调整其位置作为折叠冗余边距的一种方式。为什么？就是这样。

Given the following problem:

鉴于以下问题：

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

You can fix it by adding a child with content, such as a simple space. But we all hate to add spaces for what is a design-only issue. Therefore, use the white-spaceproperty to fake content.

您可以通过添加具有内容的子项（例如简单空间）来修复它。但是我们都讨厌为纯设计问题添加空间。因此，使用该white-space属性来伪造内容。

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

Where position: relative;ensures correct positioning of the fix. And white-space: pre;makes you not having to add any content - like a white space - to the fix. And height: 0px;width: 0px;overflow: hidden;makes sure you'll never see the fix.

凡position: relative;确保修复的正确定位。而且white-space: pre;让你不必添加任何内容-就像一个空白-该修补程序。并height: 0px;width: 0px;overflow: hidden;确保您永远不会看到修复程序。

You might need to add line-height: 0px;or max-height: 0px;to ensure the height is actually zero in ancient IE browsers (I'm unsure). And optionally you could add <!--dummy-->to it in old IE browsers, if it does not work.

您可能需要添加line-height: 0px;或max-height: 0px;确保在古代 IE 浏览器中高度实际上为零（我不确定）。<!--dummy-->如果它不起作用，您可以选择在旧的 IE 浏览器中添加它。

In short, you can do all this with only CSS (which removes the need to add an actual child to the HTML DOM-tree):

简而言之，您只需使用 CSS 即可完成所有这些操作（无需向 HTML DOM 树添加实际子项）：

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

回答by bingo

To prevent "Div parent" use margin of "div child":
In parent use these css:

为了防止“div parent”使用“div child”的边距：
在父级中使用这些css：

• Float
• Padding
• Border
• Overflow

• 漂浮
• 填充
• 边界
• 溢出

回答by SandRock

An alternative solution I found before I knew the correct answer was to add a transparent borderto the parent element.

在我知道正确答案之前我找到的另一种解决方案是向父元素添加透明边框。

Your box will use extra pixels though...

不过，您的盒子将使用额外的像素...

.parent {
    border:1px solid transparent;
}