Why does overflow: hidden add padding/margin?

Question

I encountered something very strange today. When adding the style overflow: hidden to a div, if its content has a header, it gets some extra blank space which seems like margin or padding. The amount is small, so I usually would not have even noticed, or cared, but the problem is that I'm making an animation, and that margin/padding is messing it up. For hours I thought it was the animation which was wrong, but I finally managed to narrow it down to this.

Here's the code with overflow:

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

The ng-content renders this:

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

And it looks like this:

I want you to notice the arrows which show the extra space I'm talking about. To compare, this is what it looks like if I remove style="overflow:hidden":

I know it might be hard to tell, but it's almost like if the "testing bootstrap header" is getting some unwanted margin whenever that div has overflow: hidden, which messes up my animation. How can I fix this?

I'm using Bootstrap 4 and Angular 5 if that's of any help.

If you inspect element, what other CSS attributes do you see on the container and inner divs? Especially position, display, float? My hunch is that the overflow attribute is messing with the stacking context in unexpected ways. — cheryllium, Dec 24 '17 at 04:22
@cheryllium, I've tried that and I couldn't find anything out of the ordinary. I'm not the best when it comes to css so it's not like I'd know what to look for, but anyway. After more testing, I also noticed this only seems to affect, headers (
in this case). If I remove that element, then nothing wrong happens, no extra space is added. It might also happen with other tags, but that's what I've got so far. — Christian, Dec 24 '17 at 04:25

BoltClock · Answer 1 · 2017-12-24T05:26:51.040

3

Chances are, the h5 (the "testing bootstrap header") has a top margin either from browser defaults or Bootstrap, that's being affected by the div's overflow: hidden (which causes it to establish a block formatting context that blocks child margins from collapsing with their parent margins). See collapsing margins in the spec.

If removing the top margin fixes this, that's your answer.

edited Dec 24 '17 at 05:26

answered Dec 24 '17 at 05:23

BoltClock

700,868
160
1,392
1,356

I came to a similar conclusion with [this jsfiddle](https://jsfiddle.net/ConnorsFan/43666wwd/). The top margin of the `body` element seems to collapse with the margin of the `h5` element. Removing the margin of the body solves the problem, as far as I can see in this case. – ConnorsFan Dec 24 '17 at 05:26
Yes, that worked. Is there a way I can make the content block margins from collapsing all the time without overflow: hidden? That way it at least wouldn't be noticeable. Basically I need overflow: hidden during a slide in/out animation, but once its removed, the extra margin is also removed and you tell right away how unnatural the end of the animation looks. So now I'd like to be able to disable the collapsing margins even without overflow: hidden. Removing the top margin from the bootstrap headers isn't really an option because this should be a re-usable component with any content. – Christian Dec 24 '17 at 15:41
I managed to fix it by inserting this before and after the `ng-content`: `
.
` It works and the animation looks good now, but man, this is ugly and feels like a hack. Do you think there's a better way? – Christian Dec 24 '17 at 16:02
@Christian - As suggested in [this answer](https://stackoverflow.com/a/19719427/1009922), and as shown in [this jsfiddle](https://jsfiddle.net/ConnorsFan/43666wwd/8/), you can disable margin collapsing by setting `display: inline-block;` on the div container (it may cause side effects in your layout however). – ConnorsFan Dec 24 '17 at 16:52

Why does overflow: hidden add padding/margin?

in this case). If I remove that element, then nothing wrong happens, no extra space is added. It might also happen with other tags, but that's what I've got so far.

1 Answers1