1

I have this simple html/css-code:

<html>
<body style="margin: 0;">
    <div class="container" style="height: 100vh; min-height: 100vh; background-color: purple;;">
        <div class="child" style="height: 20px; background-color: palegoldenrod; margin-top: 10px;"></div>
    </div>
</body>
</html>

I thought the padding-top applied to the .child element would push it down 10px from the top of the .container-div (which is as high as the viewport).

But instead it leads to the .container being pushed down (actually the entire body is being pushed down) by these 10px, given that I never applied a margin to the body nor the .container.

Probably it is very simple, but I just was just a little surprised...

Here is a codepen with that code: https://codepen.io/robinkohrs/pen/BaGabyp

ATP
  • 2,939
  • 4
  • 13
  • 34
Lenn
  • 1,283
  • 7
  • 20
  • 1
    Generally, padding is easier to use than margin. In your case you want to have padding-top on the parent (.container) not the child (.child). – The Fool Jun 07 '23 at 17:52
  • 1
    A better Question/Answer than what is linked in the Duplicate mention. https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element . Can be solved by `overflow: auto;` on parent if height is fixed, or `overflow: hidden;` if not. – KeitelDOG Jun 07 '23 at 18:25

0 Answers0