Html Margin-Top 将外部 div 向下推

Margin-Top push outer div down

提问by Danny

I have a header div as the first element in my wrapper div, but when I add a top margin to a h1 inside the header div it pushes the entire header div down. I realize this happens whenever I apply a top margin to the first visible element on a page.

我有一个标题 div 作为我的包装 div 中的第一个元素，但是当我向标题 div 内的 h1 添加上边距时，它会将整个标题 div 向下推。我意识到每当我将上边距应用于页面上的第一个可见元素时就会发生这种情况。

Here is a sample code snippet. Thanks!

这是一个示例代码片段。谢谢！

div#header{
 width: 100%;
 background-color: #eee;
 position: relative;
}

div#header h1{
 text-align: center;
 width: 375px;
 height: 50px;
 margin: 50px auto;
 font-size: 220%;
 background: url('../../images/name_logo.png') no-repeat;
}

<div id="header">
 <h1>Title</h1>
 <ul id="navbar"></ul>
</div>

回答by JuanPablo

put overflow:autoin the parent div
see more in this link

放入overflow:auto父级，div
在此链接中查看更多信息

回答by digitaldreamer

I don't have a solid explanation on why this happens, but I've fixed this by changing the top-marginto top-padding, or adding display: inline-blockto the element style.

我没有关于为什么会发生这种情况的可靠解释，但我已经通过更改top-margintotop-padding或添加display: inline-block到元素样式来解决此问题。

EDIT: This is my theory

编辑：这是我的理论

I have a feeling it has something to do with how margins are collapsed (combined).

我有一种感觉，它与边距如何折叠（组合）有关。

from W3C Collapsing Margins:

来自W3C 折叠边距：

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

在本规范中，表达折叠边距意味着两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有非空内容、填充或边界区域或间隙将它们分开）组合形成单个边距.

My theory is that since your first element is next to the body the two margins combine and are applied to the body: this forces the body's content to start below the applied collapsed margin in compliance with the box model.

我的理论是，由于您的第一个元素位于正文旁边，因此两个边距组合并应用于正文：这会强制正文的内容开始低于应用的折叠边距，符合盒模型。

There are situations where the margins do not collapse which might be worth playing around with (from Collapsing Margins):

有些情况下边距不会折叠，这可能值得尝试（来自Collapsing Margins）：

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block's bottom margin.)
* the root element

回答by Jesús Carrera

This are some of the ways to avoid margin collapsing between parent-child elements. Use the one that fits better with the rest of your styling:

这是避免父子元素之间边距折叠的一些方法。使用更适合您其余造型的款式：

• Set displayto other than block.
• Set floatto other than none.
• Remove the margin, and use instead padding. For example if you had margin-top: 10px, replace with padding-top: 10px;.
• Remove the margin, and use instead position(absoluteor relative) with attributes top, bottom, etc. For example if you had margin-top: 10px, replace with position: relative; top: 10px;.
• Add a paddingor a borderin the side where the margins are collapsing, to the parentelement. The border can be 1px and transparent.
• Set overflowto other than visibleto the parentelement.

• 设置display为 以外block。
• 设置float为 以外none。
• 删除边距，并使用padding. 例如，如果您有margin-top: 10px，请替换为padding-top: 10px;。
• 取出保证金，而是使用position（absolute或relative）有属性top，bottom等等。例如，如果你有margin-top: 10px，请更换position: relative; top: 10px;。
• 将 apadding或 aborder在边距折叠的一侧添加到父元素。边框可以是 1px 并且是透明的。
• 设置overflow为除visible向父元素。

回答by dudewad

I know this is an old issue, I've come across it many times. The problem is that all of the fixes here are hacks that would potentially have unintended consequences.

我知道这是一个老问题，我遇到过很多次。问题是这里的所有修复都是可能会产生意外后果的黑客攻击。

First off, there's an easy explanation for the root problem. Due to the way that margin collapsing works, if the first element inside a container has a top margin, that top margin is effectively applied to the parent container itself. You can test this on your own by doing the following:

首先，对根本问题有一个简单的解释。由于边距折叠的工作方式，如果容器内的第一个元素具有顶部边距，则该顶部边距会有效地应用于父容器本身。您可以通过执行以下操作自行测试：

<div>
    <h1>Test</h1>
</div>

In a debugger, open this up and hover the div. You'll notice that the div itself actually is placed where the top-margin of the H1 element stops. This behavior is intended by the browser.

在调试器中，打开它并将 div 悬停。您会注意到 div 本身实际上位于 H1 元素的上边距停止的位置。此行为是浏览器有意为之。

So there's an easy fix to this without having to resort to strange hacks, as most of the posts here do (no insults intended, its just the truth) - simply go back to the original explanation - ...if the first element inside a container has a top margin...- Following that, you'd therefore need the first element in a container to NOThave a top margin. Okay, but how do you do that without adding elements that don't interfere semantically with your document?

所以有一个简单的解决方法，而不必求助于奇怪的黑客，因为这里的大多数帖子都是这样做的（没有侮辱的意思，这只是事实） - 只需回到最初的解释 - ...if the first element inside a container has a top margin...- 在此之后，你需要容器中第一个没有上边距的元素。好的，但是您如何在不添加不会在语义上干扰您的文档的元素的情况下做到这一点？

Easy! Pseudo-elements! You could do this via a class or a pre-defined mixin. Add a :beforepseudo-element:

简单！伪元素！你可以通过一个类或一个预定义的 mixin 来做到这一点。添加一个:before伪元素：

CSS via a class:

CSS 通过一个类：

.top-margin-fix:before {   
    content: ' ';
    display: block;
    width: 100%;
    height: .0000001em;
}

With this, following the above markup example you would modify your div as such:

有了这个，按照上面的标记示例，您将修改您的 div：

<div class="top-margin-fix">
    <h1>Test</h1>
</div>

Why does this work?

为什么这样做？

The first element in a container, if it has no top-margin, sets the position of the start of the next element's top margin. By adding a :beforepseudo-element, the browser actually adds a non-semantic (in other words, good for SEO) element into the parent container beforeyour first element.

容器中的第一个元素，如果它没有上边距，则设置下一个元素上边距的开始位置。通过添加:before伪元素，浏览器实际上在您的第一个元素之前向父容器添加了一个非语义（换句话说，有利于 SEO）元素。

Q. Why the height: .0000001em?

Q. 为什么高度：.0000001em？

A. A height is required for the browser to push the margin element down. This height is effectively zero, but it will still allow you to add padding to the parent container itself. Since it's effectively zero, it won't have an effect on the layout of the container, either. Beautiful.

A. 浏览器向下推边距元素需要一个高度。这个高度实际上为零，但它仍然允许您向​​父容器本身添加填充。由于它实际上为零，因此它也不会对容器的布局产生影响。美丽的。

Now you can add a class (or better, in SASS/LESS, a mixin!) to fix this problem instead of adding weird display styles that will cause unexpected consequences when you want to do other things with your elements, purposefully eliminating margins on elements and/or replacing it with padding, or strange position/float styles that really aren't intended to resolve this issue.

现在你可以添加一个类（或者更好，在 SASS/LESS 中，一个 mixin！）来解决这个问题，而不是添加奇怪的显示样式，当你想对元素做其他事情时会导致意想不到的后果，有目的地消除元素的边距和/或用填充或奇怪的位置/浮动样式替换它，这些样式实际上并非旨在解决此问题。

回答by Bijay

display: flexwill work in this case. Give parent element display: flex;and then give margin as per your requirement to the h1tag.

display: flex在这种情况下会起作用。提供父元素display: flex;，然后根据您的要求为h1标签提供边距。

回答by Ishu

This happens because of margin collapse. When child element touches the boundary of parent element and any of them applied with margins then :

这是因为保证金崩溃。当子元素触及父元素的边界并且其中任何一个应用了边距时：

1. The margin which is largest will win (applied).

2. if any of them having margin then both will share the same.

1. 最大的保证金将获胜（应用）。

2. 如果他们中的任何一个有保证金，那么两者将共享相同的。

Solutions

解决方案

1. apply border to parent which makes parent and child separates.
2. apply padding to parent which makes parent and child separates.
3. apply overflow rather than visible on parent.
4. use before or after to create virtual element in parent div which can differ margin applied child and parent.
5. create one html element between margin applied child and parent can also separates them .

1. 对父级应用边框，使父级和子级分离。
2. 对父级应用填充，使父级和子级分离。
3. 应用溢出而不是在父级上可见。
4. 使用 before 或 after 在父 div 中创建虚拟元素，这可以使应用的子级和父级的边距不同。
5. 在外边距应用的子级和父级之间创建一个 html 元素也可以将它们分开。

回答by Libin

Run into this issue today.

今天遇到这个问题。

overflow: hiddendidn't worked as expected when I had more elements followed.

overflow: hidden当我有更多元素时，没有按预期工作。

So I tried changing the parent div's display property and display: flexworked !!!

所以我尝试更改父 div 的显示属性并成功display: flex！！！

Hope this may help someone. :)

希望这可以帮助某人。:)

回答by adamspruijt

Adding a tiny bit of padding to the parent element top can fix this issue.

在父元素顶部添加一点点填充可以解决这个问题。

.parent{
  padding-top: 0.01em;
}

This is useful if you need an element inside the parent to be visible outside the parent element, like if you are creating an overlapping effect.

如果您需要父元素内部的元素在父元素外部可见，这将非常有用，例如您正在创建重叠效果。