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;

内部div的保证金方式是反直觉的。这里有比我更聪明的人讨论过：

Margin on child element moves parent element

如果您阅读该链接上的评论，您会发现很多人对这种奇怪的规则并不感到特别高兴。要么！

我使用overflow：auto技术对小提琴进行了更改（删除了顶部的跨度，边距仍然保持不变）：

https://jsfiddle.net/ps9na82r/

Answer 2

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="header-fixed">
  <div class="container">
    <div class="row">
      <div class="col-xs-4 col-sm-4 text-left">
        <a class="fa fa-home"></a>
      </div>
      <div class="col-xs-4 col-sm-4 text-center">
        <a class="fa fa-user"></a>
      </div>
      <div class="col-xs-4 col-sm-4 text-right">
        <a class="fa fa-shopping-cart"></a>
      </div>
    </div>
  </div>
</div>

Answer 3

如果你想避免对高度进行硬编码，你可以简单地添加一个fit-content（或100％）的高度修改器。这将确保包装内的任何内容都可以用它来包装包装。

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

Span不应该影响您的边距，因为它是一个内联元素。但是，如果您使用段落，除非您将其删除，否则它们将根据您的浏览器设置默认保证金。

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

我注释掉了margin-top，所以你可以看到你如何在没有声明的情况下保留余量，因为段落会自动创建一个。如果您使用的是带有开发人员工具的浏览器，则可以按 F12 ，然后按 Ctrl + Shift + C ，然后将鼠标悬停在元素上以查看确切的结果。< / p>

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

overflow: auto;

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

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

有关Box Model - Collapsing Margins的更多信息，请参阅

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

3 个答案: