边缘顶推外部div

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中有一个header div作为第一个元素，但是当我在header div中为h1添加一个顶边距时，它会将整个header 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>

7 个解决方案

#1

162

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

放置溢出:自动在父div中看到更多在这个链接

#2

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

我没有关于为什么会发生这种情况的可靠解释，但是我已经通过将顶边距改为顶边距，或者在元素样式中添加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):

有些情况下，利润率不会崩溃，这可能值得一试(从利润率崩溃开始):

* 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

#3

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 display to other than block.
将显示设置为非块。
Set float to other than none.
将float设置为none。
Remove the margin, and use instead padding. For example if you had margin-top: 10px, replace with padding-top: 10px;.
去掉空白，用填充物代替。例如，如果你有页边距:10px，用页边距:10px代替;
Remove the margin, and use instead position (absolute or relative) with attributes top, bottom, etc. For example if you had margin-top: 10px, replace with position: relative; top: 10px;.
删除页边，使用带有顶部、底部等属性的位置(绝对的或相对的)。上图:10 px;。
Add a padding or a border in the side where the margins are collapsing, to the parent element. The border can be 1px and transparent.
向父元素添加边距或边距折叠的边距。边界可以是1px并且透明。
Set overflow to other than visible to the parent element.
将溢出设置为父元素可见的以外。

#4

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

显示:flex在这种情况下可以工作。给父元素显示:flex;然后根据你对h1标签的要求给出空白处。

#5

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悬停。这种行为是由浏览器决定的。

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 NOT have a top margin. Okay, but how do you do that without adding elements that don't interfere semantically with your document?

因此，有一个简单的解决办法，不用像这里的大多数帖子那样求助于奇怪的黑客(没有恶意攻击，只有真相)——只要回到最初的解释——……如果容器中的第一个元素有一个顶边…-在此之后，您将需要容器中的第一个元素没有顶边。但是如何在不添加不影响文档语义的元素的情况下实现这一点呢?

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

简单!伪元素!您可以通过类或预定义的mixin来实现这一点。添加:在伪元素:

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 :before pseudo-element, the browser actually adds a non-semantic (in other words, good for SEO) element into the parent container before your first element.

如果容器中的第一个元素没有顶边距，则设置下一个元素的顶边距的开始位置。通过添加:在伪元素之前，浏览器实际上会在第一个元素之前添加一个非语义(也就是说，对SEO有利)元素到父容器中。

Q. Why the height: .0000001em?

问:为什么身高:.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.浏览器需要一个高度来将margin元素往下推。这个高度实际上是零，但是它仍然允许您向父容器本身添加填充。因为它实际上是零，所以它也不会对容器的布局产生影响。美丽。

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 /少,mixin !)解决这个问题而不是添加怪异的显示样式,会导致意想不到的后果,当你要做其他的事情和你的元素,有意消除利润率元素和/或更换填料,或奇怪的位置/浮动风格真的不打算解决这个问题。

#6

Run into this issue today.

今天遇到这个问题。

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

溢出:当我有更多的元素跟随时，隐藏并没有像预期的那样工作。

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

因此，我尝试更改父div的显示属性和显示:flex工作!

Hope this may help someone. :)

希望这对某人有帮助。:)

#7

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.

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

#1

162