왜 오버플로 : 숨김 패딩/여백 추가?

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" 제거하면 모습입니다, 비교하려면 : 나는 그것을 말할 어려울 수 있습니다 알고

,하지만 그건 거의 "테스트 부트 스트랩 헤더는"때마다 그 일부 원치 않는 마진을 얻는 경우와 같은 div는 overflow: hidden이며 내 애니메이션이 엉망입니다. 이 문제를 어떻게 해결할 수 있습니까?

저는 도움이 필요하면 부트 스트랩 4와 앵귤러 5를 사용하고 있습니다.

Answer 1

h5 ("테스트 부트 스트랩 헤더")는 브라우저 기본값 또는 부트 스트랩의 상단 여백에 div의 overflow: hidden의 영향을받습니다 (이로 인해 하위 여백을 차단하는 블록 서식 설정 컨텍스트가 설정됩니다) 부모 마진과 붕괴 됨). 사양에서 collapsing margins을 참조하십시오.

상단 여백을 제거하면 문제를 해결할 수 있습니다.