内部 div 使用边距调整外部 div 的大小

Question

内部 div 使用边距调整外部 div 的大小

我有一个高度由封装的 div 决定的 div。问题是，当我在顶部添加一些额外的边距时，encolsing 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>

Run Code Online (Sandbox Code Playgroud)

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;
}

Run Code Online (Sandbox Code Playgroud)

看起来这与<span> title</span>元素有关，好像我在底部添加一个元素，就像我期望的那样工作（除非跨度为空，在这种情况下，事情呈现为好像跨度不存在一样）。

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

在这里小提琴：

https://jsfiddle.net/d88yr4yw/

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