CSS 属性最小高度导致边距问题？

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-top:0;}

保证金崩溃发生在三种基本情况下：

Adjacent siblings:

The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats). For example:
<p>The bottom margin of this paragraph is collapsed...</p>
 <p>...with the top margin of this paragraph.</p>
Parent and first/last child::

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent. :

Empty blocks:

If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

更多关于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 2

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

Answer 3

这是因为在第二个示例中 h1 元素的 margin 正在折叠。这被称为 collapsing margins。要解决此问题，一个选择是简单地删除第一个示例中的 h1 元素的 margin。

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

Box Model - 8.3.1 Collapsing margins

The bottom margin of an in-flow block box with a height of auto and a min-height of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.

A box's own margins collapse if the min-height property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a height of either 0 or auto, and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.

作为旁注，我建议通过绝对定位 relative 的伪元素添加三角形到 top 值为 top 的父元素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>

CSS 属性最小高度导致边距问题？

CSS property min-height causing margin issue?

html

css

spacing

CSS 属性 最小高度导致边距问题？

CSS property min-height causing margin issue?

html

css

spacing

CSS 属性最小高度导致边距问题？