css - 为什么溢出: hidden add padding/margin?

Question

我今天遇到了一件很奇怪的事情。添加样式时 overflow: hidden对于一个 div，如果它的内容有一个标题，它会得到一些额外的空白空间，看起来像边距或填充。数量很少，所以我通常不会注意到或关心，但问题是我正在制作动画，而边距/填充搞砸了。几个小时以来，我一直认为是动画出了问题，但我最终设法将范围缩小到了这一点。

这是溢出的代码:

<div style="overflow:hidden">
    <ng-content select="wizard-step"></ng-content>
</div>

ng-content 呈现这个:

<h5><strong>testing bootstrap header</strong></h5>
<search-select #select [placeholder]="'Busca audiencias...'" (selected)="onSelected($event); select.text = ''" [template]="template" property="name" [items]="catalogAudiences | filterAudiences:audiences"></search-select>
<div class="mt-3">
    <div *ngIf="!audiences?.length" class="alert alert-primary">
        No has agregado audiencias.
    </div>
    <audiences-list (remove)="onRemove($event)"  [readOnly]="true" [audiences]="audiences"></audiences-list>
</div>

它看起来像这样:

我希望您注意显示我所说的额外空间的箭头。相比之下，如果我删除 style="overflow:hidden"，它就是这个样子:

我知道这可能很难说，但只要 div 有 overflow: hidden，“测试 Bootstrap header ”就好像获得了一些不需要的边距。 ，这弄乱了我的动画。我该如何解决这个问题？

如果有任何帮助，我正在使用 Bootstrap 4 和 Angular 5。

Answer 1

很有可能，h5(“测试 Bootstrap header ”)有一个来自浏览器默认值或 Bootstrap 的上边距，它受到 div 的 overflow: hidden 的影响(这导致它建立一个 block 格式化上下文，阻止子边距与其父边距折叠)。参见 collapsing margins在规范中。

如果删除上边距可以解决这个问题，那就是你的答案。