Warum Überlauf: versteckt hinzufügen Polsterung/Marge?

Question

Ich bin heute etwas sehr merkwürdiges begegnet. Wenn der Stil overflow: hidden zu einem div hinzugefügt wird, wenn sein Inhalt einen Header hat, erhält er zusätzlichen Leerzeichen, der wie Rand oder Padding aussieht. Die Menge ist klein, also hätte ich es normalerweise nicht bemerkt, oder es wäre mir egal, aber das Problem ist, dass ich eine Animation mache, und dieser Rand/Abstand macht es kaputt. Stundenlang dachte ich, dass es die Animation war, die falsch war, aber ich habe es schließlich geschafft, mich darauf zu beschränken.

Hier ist der Code mit Überlauf:

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

Der ng-Gehalt macht dies:

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

Und es sieht wie folgt aus:

Ich möchte Sie auf die Pfeile, bemerken, welche den zusätzlichen Raum zeigen, über den ich spreche. Zum Vergleich: das ist, was es sieht aus wie wenn ich entferne style="overflow:hidden":

Ich weiß, es könnte zu sagen, hart sein, aber es ist fast wie wenn der „Prüfung Bootstrap-Header“ wird einigen unerwünschten Spielraum bekommen, wenn das div hat overflow: hidden, was meine Animation vermasselt. Wie kann ich das beheben?

Ich benutze Bootstrap 4 und Angular 5, wenn das hilft.

Answer 1

Die Chancen stehen gut, die h5 (das „Testen Bootstrap-Header“) hat einen oberen Rand entweder vom Browser defaults oder Bootstrap, durch die die betroffenen, dass Sein div overflow: hidden (die er einen Block-Formatierungskontext schaffen bewirkt, dass die Margen Kind Blöcke aus kollabiert mit ihren Eltern Margen). Siehe collapsing margins in der Spezifikation.

Wenn das Entfernen des oberen Randes dies behebt, ist das Ihre Antwort.