Question

我想知道为什么会发生这种现象吗？

内部div设置底边距为16px

据我所知，外部div与内部div接触，没有填充或边框，如果未将外部div设置为高度css样式，则下div将距外部div 16px，因为边距是重叠。但是，如果在外部div上设置了高度css样式，则下div会靠近外部div。

那么，您能解释一下这种现象是怎么引起的吗？

.outer {
  background: yellow;
  height: 100px;
}

.inner {
  height: 100px;
  background: green;
  margin-bottom: 16px;
}

.under {
  background: red;
  height: 10px;
}

<div class="outer">
  <div class="inner"></div>
</div>
<div class="under"></div>

Answer 1

inner嵌套在outer内部，并且under直接位于outer的下面，没有空格或填充。因此，无论给inner留出多少利润，outer和under之间都没有空格。

您只需在margin-top上添加一个under就可以做到这一点。

.outer{
    background:yellow;
    height:100px;
}

.inner{
    height:100px;
    background:green;
}

.under{
  background:red;
  height:10px;
  margin-top:16px;
}

Answer 2

您不能在子元素上添加边距以影响父元素。您可以按如下所示将<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/frameLayout2" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".LeaderboardFrag">  <ListView android:id="@+id/leaderboardListView" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>添加到外部类

margin-bottom:16px;

Answer 3

设置.outer height:auto;

.outer{
  background:yellow;
  height:auto;
}
.inner{
  height:100px;
  background:green;
  margin-bottom:16px;
}
.under{
  background:red;
  height:10px;
}

<div class="outer">
  <div class="inner"></div>
</div>
<div class="under"></div>

Answer 4

首先，让我们解决这个问题：

如果在外部div上删除高度css样式，则会发现下div向下移动

这是由于Margin Collapsing：

如果没有边界，填充，内联部分，创建的块格式上下文，或者没有将块的边距底部与最后一个子元素的边距底部分开的间隙，则这些边距会崩溃。 缩窄的边距最终出现在父级之外。

这些规则甚至适用于利润率为零的情况，因此第一个/最后一个孩子的利润最终会超出其父母（根据上述规则），无论父母的利润是否为零。

您的子级边距正在与父级边距一起崩溃，因此16px的边距成为父级的一部分。

但是通过指定height，您可以消除保证金崩溃。

来自W3 Box Model spec*：

当且仅当：

两者均属于垂直相邻的框边，即形成以下对之一：

最后一个流入子代的底边距及其父代的底边距如果父代具有“自动”计算出的身高

由于页边距不会塌陷，因此孩子的页边距只会尝试扩大外部div的高度（这不会反映出来，因为父级的严格设置高度为100px）。

但是等等 ...如果我们以其他方式破坏了崩溃该怎么办？我们会看到高度增加16px吗？

当且仅当：

没有线框，没有间隙，没有填充，也没有边框

似乎很容易。让我们添加一个边框来打破此规则。

.outer {
  background: yellow;
  border-bottom: 1px solid black;
}

.inner {
  height: 100px;
  background: green;
  margin-bottom: 16px;
}

.under {
  background: red;
  height: 10px;
}

<div class="outer">
  <div class="inner"></div>
</div>
<div class="under"></div>

Voila！正如预期的那样，边距不会塌陷，因此孩子的边距会尝试扩大父级的身高。父级上没有height属性来解决此问题，父级的高度增长到116px 。

^{*这是针对较早的规范，但是此行为没有更改。实际上，我发现一些较新的规范文档与此文档有关。}

当外部显式设置高度时，边距不重叠

4 个答案: