Question 45572 in CSS Question posted in
Some basic documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    #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

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search