0

I have following html page (no external requirement)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html, body{margin:0;padding:0; }
    html{ height:100%; background-color:#99cc33 }
    body{ min-height:100%; background-color:#6633cc }
    article{ margin: 30px 0; background-color:#3366cc }

    .debug-border{ border:1px dashed #ff00ff !important; }
</style>
</head>
<body class="debug-border">
<article>
    ARTICLE<br>
</article>
</body>
</html>

As you can see in above code, body occupies 100% of the height and everything is as expected. However as soon as I remove the debug-border class from body, it shows vertical scroll. The only difference between above and below code is absence of debug-border class on body of code below

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html, body{margin:0;padding:0; }
    html{ height:100%; background-color:#99cc33 }
    body{ min-height:100%; background-color:#6633cc }
    article{ margin: 30px 0; background-color:#3366cc }

    .debug-border{ border:1px dashed #ff00ff !important; }
</style>
</head>
<body>
<article>
    ARTICLE<br>
</article>
</body>
</html>

Question: Adding a transparent border-top to body fixes my issue but I want to know why is this happening. Can someone help me explain this weird behavior?

Notes that:

  • This question is not duplicate of Why does this CSS margin-top style not work? since issue is caused by removing border of body element which actually doesn't have a height initially and takes height of the content.
  • Size of scroll area is exactly size of the margin on article tag.
  • Tried this on Firefox 80, 84, 88, 90, 109(latest) and chrome 109.0.5414.119 (latest) and chromium (latest) and all of them show the same symptom.
  • setting height of body to 100vh and removing 100% from html tag doesn't make any difference.
  • article tag doesn't occupy 100% of the height either and with margin it is still shorter than body height.
  • Only border-top causes this behavior so instead of setting border on body, bodrder-top can be used.
  • box-sizing is there since in original issue I was using bootstrap 5
AaA
  • 3,600
  • 8
  • 61
  • 86
  • To the person who commented on this question then marked it as duplicate and then closed and deleted their comment, even though the solution is same, the reason it is happening is different than other question! – AaA Jan 28 '23 at 14:04

1 Answers1

1

This is because the margins of HTML elements tend to overlap rather than add to each other. This is known as "margin collapse" more about it here

the article tag are block-level elements, you can see that if you add a size in px in its parent element and add height 100% in the article it will occupy all the space of the parent, but if you put display: inline it will only occupy the size of your content.

Alexsander Gutierreez
  • 190
  • 7
  • Good catch, but text says `no inline part` , isn;t `article` an inline part? – AaA Jan 27 '23 at 03:21
  • the article tag are block-level elements, you can see that if you add a size in px in its parent element and add height 100% in the article it will occupy all the space of the parent, but if you put display: inline it will only occupy the size of your content – Alexsander Gutierreez Jan 27 '23 at 03:32
  • Good Answer, you can include your comment in answer to clarify the difference. Thanks again – AaA Jan 27 '23 at 03:46