html - 内部 div 调整外部 div 的边距大小

Question

我有一个 div，其高度由 encolsed 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;

边距在内部 div 上的工作方式是违反直觉的。比我聪明得多的人在这里讨论了这个问题:

Margin on child element moves parent element

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

我使用溢出:自动技术对 fiddle 进行了更改(删除了顶部的跨度，并且边距仍然保留):

https://jsfiddle.net/ps9na82r/