0

First time I've seen this issue:

Consider page like this (open in new browser tab/window)

data:text/html,<body style="min-height: 100vh;margin: 0"><div style="margin: 10px"><h1>hello</h1></div></body>

The problem is that even that body don't have margin it some how collapsing with weird effect, if you inspect the elements in dev tools the body is move 10px to bottom.

Same happen with usual body, html { height: 100%; }

I can fix the issue with normal margin collapsing technics like adding border-top to body and using min-height: calc(100vh - 1px) also inline-block on body works. I can also fix this by not using margin on main .container and use padding instead.

Adding margin: 0 to h1 (it collapses with .container margin) don't change anything.

Is this behavior documented somewhere? Why this is happening? or did I made something wrong?

jcubic
  • 61,973
  • 54
  • 229
  • 402
  • 1
    it's still margin collpasing even if body has 0 margin .. 0 will collpase with 10px resulting in 10px outside – Temani Afif Apr 22 '19 at 11:12
  • `both belong to vertically-adjacent box edges, i.e. form one of the following pairs: top margin of a box and top margin of its first in-flow child` https://www.w3.org/TR/CSS2/box.html#collapsing-margins – Temani Afif Apr 22 '19 at 11:16
  • @TemaniAfif thanks I've thought that collapsing only works when element have actual margin. – jcubic Apr 22 '19 at 11:54
  • Ha, they collapse even if one of the elements has a _negative_ margin! – Mr Lister Apr 22 '19 at 12:23

0 Answers0