なぜオーバーフローですか？隠しパッド/余白を追加しますか？

Question

今日私は非常に奇妙な何かに遭遇しました。 divにスタイルoverflow: hiddenを追加すると、その内容にヘッダーがある場合は余白やパディングのような余分な余白ができます。量は少ないので、私は通常気づかずに気にしませんでしたが、問題は私がアニメーションを作っていることと、マージン/パディングがそれを台無しにしていることです。何時間も私はそれが間違っていたアニメーションだと思っていましたが、ついにそれを絞り込んでしまいました。

ここで、オーバーフローとのコードです：

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

NG-内容は、このレンダリング：

<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"を削除した場合、それは次のようになります。

私はそれを伝えるのは難しいかもしれないけど、いつでも、それがほとんど「テストのブートストラップヘッダーの」ifのようなものだが、いくつかの不要なマージンを得ていますdivにはoverflow: hiddenがあり、これは私のアニメーションを混乱させます。これをどうすれば解決できますか？

私はBootstrap 4とAngular 5を使用しています。

Answer 1

h5（「テスト用のブートストラップヘッダー」）は、ブラウザのデフォルトまたはブートストラップの上端に、divのoverflow: hiddenの影響を受けている可能性があります（ブロックマージンをブロックするブロックの書式設定コンテキストを確立します）。親のマージンと崩壊する）。仕様のcollapsing marginsを参照してください。

上部の余白を削除するとこれが解決されます。これがあなたの答えです。