Question

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

以下是示例代码段。谢谢！

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>

Answer 1

将overflow:auto放入父div中 see more in this link

Answer 2

我没有确切解释为什么会发生这种情况，但我已通过将top-margin更改为top-padding或将display: inline-block添加到元素样式来解决此问题。< / p>

编辑：这是我的理论

我觉得它与边缘折叠（组合）的方式有关。

来自W3C Collapsing Margins：

在本说明书中，表达式利润率下降意味着相邻的边缘（没有非空的内容，填充或边界区域或两个或两个更多的盒子（可能在一个旁边另一个或嵌套的）组合形成一个单一保证金。

我的理论是，由于你的第一个元素位于身体旁边，两个边距合并并应用于身体：这会强制身体的内容开始低于应用的折叠边距，符合box model。< / p>

在某些情况下，边距不会崩溃，可能值得玩（来自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

Answer 3

这是避免父子元素之间边缘折叠的一些方法。使用与你的其他造型更合适的那个：

将display设置为block以外的其他人。
将float设置为none以外的其他人。
删除边距，然后使用padding。例如，如果您有margin-top: 10px，请替换为padding-top: 10px;。
移除边距，而使用position（absolute或relative），使用属性top，bottom等。例如，如果您有{ {1}}，替换为margin-top: 10px。
在边距折叠的一侧添加position: relative; top: 10px;或padding到父元素。边框可以是1px和透明。
将border设置为overflow以外的父元素。

Answer 4

我知道这是一个老问题，我已多次碰到它。问题是这里的所有修复都是可能会产生意想不到的后果的黑客攻击。

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

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

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

所以有一个简单的解决方法，而不必诉诸于奇怪的黑客，因为这里的大多数帖子都做（没有侮辱意图，只是事实） - 只需回到原来的解释 - {{ 1}} - 之后，您需要容器中的第一个元素 NOT 具有上边距。好的，但是如果不添加不会在语义上干扰文档的元素，你怎么做呢？

轻松！伪元素！您可以通过课程或预定义的混音来完成此操作。添加...if the first element inside a container has a top margin...伪元素：

通过课程

CSS：

:before

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

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

为什么这样做？

容器中的第一个元素，如果它没有上边距，则设置下一个元素的上边距的起始位置。通过添加<div class="top-margin-fix"> <h1>Test</h1> </div>伪元素，浏览器实际上在第一个元素之前将非语义（换句话说，有益于SEO）元素添加到父容器中。

Q值。为什么身高：.0000001em？

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

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

Answer 5

display: flex将适用于此案例。提供父元素display: flex;，然后根据您对h1标记的要求提供保证金。

Answer 6

今天遇到这个问题。

当我跟随更多元素时，

overflow: hidden没有按预期工作。

所以我尝试更改父div的显示属性， display: flex 工作!!!

希望这可能有助于某人。：）

Answer 7

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

.parent{
  padding-top: 0.01em;
}

如果您需要父元素内的元素在父元素外部可见，这非常有用，就像您要创建重叠效果一样。

Answer 8

发生这种情况是因为利润率下降。当子元素碰到父元素的边界，并且其中的任何一个都带有边距时：

最大的保证金将获胜（应用）。
如果其中任何一个有保证金，那么两者将共享相同的货币。

解决方案

将边框应用于父对象，这会使父子分开。
对父级应用填充，使父级和子级分开。
应用溢出，而不是在父对象上可见。
在父级div中使用之前或之后创建虚拟元素，这可能会给子级和父级应用不同的边距。
在应用边距的子级和父级之间创建一个html元素也可以将它们分开。

保证金 - 顶部推动外部下调

8 个答案: