[csswg-drafts] [css2] Browsers disagree on margin collapsing when element’s height > content

simevidas has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css2] Browsers disagree on margin collapsing when element’s height > content ==
```html
<h1>Foo</h1>

<p>Bar</p>
```

```css
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

h1 {
  margin-top: 0px ;
}
```
Live demo: https://codepen.io/simevidas/pen/XVzaPz?editors=1100

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?


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2171 using your GitHub account

Received on Saturday, 6 January 2018 16:28:28 UTC