内部 div 用边距调整外部 div

Question

我有一个 div，其高度由一个封闭的 div 决定。问题是，当我在顶部添加一些额外的边距时，包含的 div 会正确调整大小。当我在底部添加边距时，似乎只有封闭的 div 框模型受到影响，而封闭的 div 则不受影响。

HTML

<div style="height:100px;background-color:#adadbb">
IRRELEVANT THINGS HERE
</div>

<div class="dynamicDiv">
    <span> title</span>
    <div class="card">
        Content here
     </div>
</div>

<div style="height:100px;background-color:#adadbb">
IRRELEVANT THINGS HERE VOL 2
</div>

CSS

.dynamicDiv{
  background-color:yellow;
}

.card{
height:15vh; //an example of the height for this card. could be anything.
margin-top:10px;
margin-bottom:10px;
}

这似乎与<span> title</span> 元素有关，就好像我在底部添加一个元素一样，我希望它们可以工作（除非跨度为空，在这种情况下，事情呈现为好像跨度不存在)。

我不太明白为什么会发生这种情况，所以如果它明显与盒子模型有关，请告诉我。非常感谢。

在这里拉小提琴：

https://jsfiddle.net/d88yr4yw/

P.S：我试图实现的是拥有一个始终与封闭 div 高度一样高的 div + 顶部和底部边距 + 任何其他可能存在的元素。我宁愿我不必硬编码任何高度，如果不是不可能解决这个问题的话。

Answer 1

一种快速的解决方法是在外部 div 上使用：

overflow:auto,

或

padding-top:1px; margin-top:-1px;

margin 在内部 div 上的工作方式是违反直觉的。比我聪明得多的人在这里讨论过：

Margin on child element moves parent element

如果您阅读该链接上的 cmets，您会发现很多人对这个奇怪的“规则”也不是特别满意！

我使用溢出：自动技术对小提琴进行了更改（删除了顶部的跨度，并且边距仍然存在）：

https://jsfiddle.net/ps9na82r/

Answer 2

最好使用 padding-top 和 badding-bottom 而不是边距。 它会更柔和地扩展您的父块，而无需在父块之外添加边距

padding-top: 10px;
padding-bottom: 10px;

Answer 3

如果您想避免对高度进行硬编码，您可以简单地添加适合内容（或 100%）的高度修饰符。这将确保该包装器内的任何东西都用它拉伸包装器。

.dynamicDiv{
  background-color:yellow;
  height: fit-content;
}

Span 不应影响您的边距，因为它是一个内联元素。但是，如果您使用段落，除非您将其删除，否则它们将具有基于您的浏览器的默认边距。

看看这个小提琴：https://jsfiddle.net/d88yr4yw/4/

我注释掉了margin-top，这样你就可以看到你在没有声明的情况下仍然有一个margin，因为paragraph会自动创建一个。如果您使用的是带有开发者工具的浏览器，您可以点击 F12，然后点击 Ctrl + Shift + C，然后将鼠标悬停在元素上以查看到底发生了什么。

此外，如果您想在拉伸包装器的同时保留段落的默认边距，您可以使用 overflow 来防止内容溢出内部 div。

overflow: auto;

取消注释以查看它们的效果。

编辑：为了澄清下面 OP 的问题，边距消失的结果是由于原始包装器的内容为零而没有跨度。通过添加溢出命令，这会导致边距堆叠而不是自动折叠。

在Box Model - Collapsing Margins上查看更多信息。