内部 div 调整外部 div 带边距

Question

我有一个 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>

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> 元素有关，就好像我在底部添加一个 thigns 一样工作，就像我期望的那样（除非 span 为空，在这种情况下，事情呈现得好像跨度不存在）。

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

Fiddle 这里：

https://jsfiddle.net/d88yr4yw/

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

Answer 1

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

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

Answer 2

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

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

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

看看这个 fiddle：https://jsfiddle.net/d88yr4yw/4/

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

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

overflow: auto;

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

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

更多信息见Box Model - Collapsing Margins。

Answer 3

一个快速的解决方法是在外部 div:

overflow:auto,

或

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

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

Margin on child element moves parent element

如果你阅读关于 link 的评论，你会发现很多人对这种奇怪的事情也不是特别满意 "rule"！

我使用 overflow:auto 技术对 fiddle 进行了更改（删除了顶部的跨度，边距仍然存在）：

https://jsfiddle.net/ps9na82r/

内部 div 调整外部 div 带边距

Inner div resizing outer div with margins

html

css

margin