W3C home > Mailing lists > Public > public-css-archive@w3.org > January 2018

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

From: Šime Vidas via GitHub <sysbot+gh@w3.org>
Date: Sat, 06 Jan 2018 16:28:21 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-286496631-1515256100-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:22 UTC