Where does the space from the top-margin came from?

Question

I started to learn CSS, and I got to that example in the internet: https://www.w3schools.com/css/tryit.asp?filename=trycss_margin_shorthand

But I tried to play with it, and changed some things. Now the code looks like:

 div#my {
        border: 8px solid black;
        margin-left: 0%;
        margin-right: 0%;
        
        height: 500px;
        
        background-color: red;
    }
    
    div {
        border: 5px solid black;
        margin: inherit;
        background-color: lightblue;
    }

<div id="my">
   <div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</div>

What I see is a big blue block inside a big red block. The blue block collapse with his left and right sides to the red block's border, but from the top I have margin for some reason.

I think its because I chose inherit in the css element. But that says that I have a default margin to the page. Please, help here to understand.

You've inherited it from the body - the body has 8px of margin and you've set all divs to inherit from their parent — Pete, Jun 05 '17 at 14:01

Pete · Answer 1 · 2017-06-05T14:23:01.173

As noone seems to have explained this properly I will try for you.

The inherit keyword in css means that you inherit the styles directly from it's parent. As you have set all divs to inherit their margins, they will inherit that property from their direct parent.

The final div (the div that is nested inside #my) will inherit from the #my div. - As you have not set any margin for top and bottom, this will also stay as inherit.

This means that the #my div will inherit the top and bottom margin (left and right have been set and so will not be inherited) from it's parent, which is the body tag.

The body tag has 8px of margin (depending on which browser you use - I use chrome) so this is inherited by all the divs, which is why you have 8px margin at the top of the inner div. If you want no margin on that final div, you can either remove the margin property altogether, or just set it to 0 instead of inherit.

So to summarise inner div inherits from parent div called my, which in turn inherits from parent body tag, which is set to 8px (or browser default) so your margin comes from your body tag.

More information on css inherit

This is the only correct answer, I'm not sure why it was downvoted. — BoltClock, Jun 05 '17 at 14:22

Kristijan Iliev · Answer 2 · 2017-06-05T14:21:13.240

There's default margin to body tag of 8px which gets attached to your child divs because of explicitly written rule margin: inherit. You have to change the margin form inherit to 0 or remove it, in order to child elements don't have weird (default) margins.

div#my {
        border: 8px solid black;
        margin-left: 0%;
        margin-right: 0%;
        
        height: 500px;
        
        background-color: red;
    }
    
    div {
        border: 5px solid black;
        margin: 0;
        background-color: lightblue;
    }

<div id="my">
  <div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</div>

@Pete thank you for pointing out my error. I paid more attention and updated my answer. Have a look now. — Kristijan Iliev, Jun 05 '17 at 14:21

score 0 · Answer 3 · answered Jun 05 '17 at 14:24

There is a default margin on the body which is also inherited in your case (with margin: inherit), you can reset it like this:

html,
body {
  margin: 0;
}

div#my {
  border: 8px solid black;
  margin-left: 0%;
  margin-right: 0%;
  height: 500px;
  background-color: red;
}

div {
  border: 5px solid black;
  margin: inherit;
  background-color: lightblue;
}

<div id="my">
  <div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</div>

score 0 · Answer 4 · answered Jun 05 '17 at 14:36

W3C schools explanation of inherit

The inherit keyword specifies that a property should inherit its value from its parent element.

In your code you have inherited the margin property of ALL DIV.

The div with id "my": inherit margin top and bottom from body (8px of margin), left and right are set.

The div without id: inherit the margin top and bottom from div#id (always 8px) and the left and right from div#id (0% = 0px).

To better understand I added a different margin to body, and set a different margin left/right on div#my.

body {
  margin:50px;
  background-color:yellow;
}

div#my {
        border: 8px solid black;
        margin-left: 5px;
        margin-right: 0%;
        
        height: 500px;
        
        background-color: red;
    }
    
    div {
        border: 5px solid black;
        margin: inherit;
        background-color: lightblue;
    }

<div id="my">
   <div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</div>

Where does the space from the top-margin came from?

4 Answers4