Question

我正在尝试创建一个div，其底部附有一个CSS生成的三角形。当使用CSS height属性设置上面div的高度时，它可以正常工作，但是当我使用min-height时，它会导致有一个不需要的间隙，我无法摆脱它使用margin CSS属性。

有谁知道如何摆脱这个问题？

.triangle {
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  border-style: solid;
  border-width: 17px 10.5px 0 10.5px;
}

.divider1 {
  min-height: 80px;
}

.divider2 {
  height: 80px;
}

<div class="divider1" style="background-color: blue">
  <h1>This one doesn't work</h1>
</div>
<div class="triangle" style="border-color: blue transparent transparent transparent"></div>

<div class="divider2" style="background-color: green">
  <h1>But this one does?</h1>
</div>
<div class="triangle" style="border-color: green transparent transparent transparent"></div>

Answer 1

这是因为h1元素的margin在第二个示例中崩溃了。这称为collapsing margins。要解决此问题，一种方法是在第一个示例中简单地删除h1元素的margin。

对于它的价值，以下适用：

Box Model - 8.3.1 Collapsing margins

height auto和min-height为零的流入块框的下边距与其最后一个流内块级子级底部边距折叠盒子没有底部填充，没有底部边框，孩子的底部边缘不会折叠，顶部边缘有间隙。

如果min-height属性为零，并且它既没有顶部或底部边框也没有顶部或底部填充，并且height为0或者auto，则框的自身边距会崩溃top，它不包含换行符，并且其所有流入子项的边距（如果有）都会崩溃。

作为旁注，我建议通过一个绝对定位 relative 的伪元素将三角形添加到100%值为height的父元素

这样做无论父母是否有min-height / margin，无论元素的.triangle-after { position: relative; } .triangle-after:after { content: ''; width: 0; height: 0; position: absolute; top: 100%; left: 0; right: 0; margin: auto; border-style: solid; border-width: 17px 10.5px 0 10.5px; } .divider1 { min-height: 80px; } .divider1.triangle-after:after { border-color: blue transparent transparent transparent; } .divider2 { height: 80px; } .divider2.triangle-after:after { border-color: green transparent transparent transparent; }是什么，它都会有效。

<div class="divider1 triangle-after" style="background-color: blue">
  <h1>Both of these work now.</h1>
</div>

<div class="divider2 triangle-after" style="background-color: green">
  <h1>Both of these work now.</h1>
</div>

{{1}}

Answer 2

这是保证金崩溃的结果。这应该解决它：

h1 {margin-top:0;}

保证金崩溃发生在三个基本情况中：

相邻的兄弟姐妹：

相邻兄弟姐妹的边缘被折叠   （除非后来的兄弟姐妹需要通过花车清理）。对于   例如：
<p>The bottom margin of this paragraph is collapsed...</p>
 <p>...with the top margin of this paragraph.</p>
父母和第一个/最后一个孩子::

如果没有边框，填充，内联   内容，或间隙，以分隔块的边缘顶部   margin-top的第一个子块，或没有边框，填充，内联   内容，高度，最小高度或最大高度来分隔   在最后一个孩子的边缘底部的块的底部 -   那些利润就会崩溃。倒塌的保证金最终在外面   家长。：

空块：

如果没有边框，填充，内联内容，   高度或最小高度将块的边缘顶部与其分隔开   margin-bottom，然后它的顶部和底部边缘崩溃。

更多关于developer.mozilla.com

.triangle {
    width: 0;
    height: 0;
    margin-right: auto;
    margin-left: auto;
    border-style: solid;
    border-width: 17px 10.5px 0 10.5px;
}
.divider1 {
    min-height: 80px;
    margin:0;
    padding:0;
}
h1 {
    margin:0;
}
.divider2 {
    height: 80px;
}

<div class="divider1" style="background-color: blue">
     <h1>This one works now!</h1>

</div>
<div class="triangle" style="border-color: blue transparent transparent transparent"></div>
<div class="divider2" style="background-color: green">
     <h1>But this one does?</h1>

</div>
<div class="triangle" style="border-color: green transparent transparent transparent"></div>

Answer 3

在这种特定情况下，问题在于h1标记。如果您要移除h1上的边距，它将起作用。您还可以向.divider1添加填充以使其正常工作。填充将是您更好的选择，因为它可以解释任何其他具有边距的元素。

CSS属性min-height导致保证金问题？

3 个答案: