Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css2] Browsers disagree on margin collapsing when element’s height > content #2171

Closed
simevidas opened this issue Jan 6, 2018 · 4 comments
Closed

[css2] Browsers disagree on margin collapsing when element’s height > content #2171

simevidas opened this issue Jan 6, 2018 · 4 comments
Labels
CSS2

Comments

@simevidas
Copy link
Contributor

simevidas commented Jan 6, 2018 •
edited
Loading 

<h1>Foo</h1>

<p>Bar</p>
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

h1 {
  margin-top: 0;
}

Live demo: https://codepen.io/simevidas/pen/XVzaPz?editors=1100

gif

In Chrome, Safari, and Edge, the <p> element’s bottom margin collapses with <body>, which causes the <html> element to expand (to contain <body>’s newly-acquired margin) beyond 100vh, which in turn causes the scroll bar to appear.

In Firefox there is no scroll bar.

Who is right? If <body>’s height is set to a value that is larger than its contents, should margin collapsing happen to begin with?
@simevidas
Copy link
Contributor Author

simevidas commented Jan 6, 2018 •
edited
Loading

I’ve narrowed it down to min-height. In Chrome & co., margin collapsing happens before the element’s min-height is set. In the following example, the <div> is high enough to contain the <p> element’s bottom margin, but it still collapses causing the subsequent <p> to move down.

screen shot 2018-01-06 at 5 40 11 pm

@SelenIT
Copy link
Collaborator

SelenIT commented Jan 6, 2018 •
edited
Loading

It seems that Chrome & co. behave according to the latest CSS2.x spec draft:

The bottom margin of an in-flow block box with a 'height' of 'auto' collapses with its last in-flow block-level child's bottom margin, if:

  • the box has no bottom padding, and
  • the box has no bottom border, and
  • the child's bottom margin neither collapses with a top margin that has clearance, nor (if the box's min-height is non-zero) with the box's top margin.

In your examples, the bottom margin of the paragraph doesn't collapse with the top margin of the container, thus all three conditions are true and the bottom margins should collapse (though it's not very intuitive).

@gsnedders gsnedders removed the CSS22 label Apr 13, 2018
@SelenIT SelenIT mentioned this issue Apr 23, 2018
Closed
@gsnedders
Copy link
Contributor

gsnedders commented Jun 15, 2018 •
edited
Loading

Firefox is wrong per the errata; #2771 is the issue for reapplying this, as @SelenIT says.

@gsnedders
Copy link
Contributor

https://bugzilla.mozilla.org/show_bug.cgi?id=616339 is the Firefox bug if I'm not mistaken; closing because this isn't a spec issue at this point when there's only one browser disagreeing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS2
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@frivoal @gsnedders @SelenIT @simevidas