为什么溢出：隐藏添加填充/边距？

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"：

，这就是它的样子

我知道这可能很难说，但它几乎就像测试引导程序标题＆＃34;每当div有overflow: hidden时会得到一些不必要的余量，这会弄乱我的动画。我该如何解决这个问题？

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

Answer 1

有可能，h5（“测试引导程序头”）有一个来自浏览器默认值或Bootstrap的上边距，它受div overflow: hidden的影响（导致它建立一个块）格式化上下文阻止子边距与其父边距折叠）。请参阅规范中的collapsing margins。

如果删除上边距修复此问题，那就是你的答案。