Unable to figure out a simple top problem in a plain HTML Page

Question

It is probably would be the simplest of task, and yet I am unable to understand. I created a very simple HTML Snippet. Code Pen Link

If you see the the pen, I have 3 nested divs, div1 being the top level div for my React Application. Now my page's body is pink color . I added a div => header and one more div => logo . Now my header div is green color . So far, so good, now in my logo div , i have an img tag. I didn't like the positioning of my image and added margin-top to my logo div . My intention was, that the my logo div should put a margin from the top of header div which is green . But instead, it inserted a margin between my body top and my header div .

I am totally running out of ideas why this is so? Any help?

Answer 1

#logo has a margin that goes beyond the parent element. See if this can help you -> CSS margin terror; Margin adds space outside parent element

Answer 2

 body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }.App { text-align: center; } img { width: 10%; height:50px; float: left; margin-left: 50px; margin-top: 25px;important; }

 <html lang="en"> <link rel="stylesheet" href="style.css"> <body style="background: pink;/* top: 0; */"> <div id="root" style=" /* top: 0px; */ /* position: absolute; */ "> <div style="background: rgb(203, 233, 215); height: 100px"> <div id="header"> <div id="logo" class="zbuda"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Logo_NIKE.svg/1200px-Logo_NIKE.svg.png"> </div> </div> </div> </div> </body> </html>