0

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.

Explanation of my problem

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

Oo-_-oO
  • 417
  • 7
  • 24

2 Answers2

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

Imightdoit
  • 64
  • 3
  • Thank you. Collapsing Margins are really a terror. I still don't know how did I miss that important thing so long. Thanks again. – Oo-_-oO Feb 01 '23 at 18:48
0

        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>
Mehwish M.Saleem
  • 1
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 03 '23 at 15:45