# A Question of Margin

**URL:** <https://forum.kirupa.com/t/a-question-of-margin/645573>\
**Category:** Uncategorized\
**Created:** [January 5, 2021, 2:41am UTC](https://forum.kirupa.com/t/a-question-of-margin/645573 "2021-01-05T02:41:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 5, 2021, 2:41am UTC](https://forum.kirupa.com/t/a-question-of-margin/645573/1 "2021-01-05T02:41:43Z")

</div>

Help me with the concept of margin here. I assume the margin-top: 40px in the CSS applies to both divs. So I can see this for the Red div - there’s a 40px space between it and the upper border of the window of the browser. Should the Blue div not be at the same height as the Red div since the same margin rule applies to it as well?

```
<style>
    div {
      width: 60%;
      height: 200px;
      margin-top: 40px;
    }
  
    .first {
      background-color: red;
      position: absolute;
      z-index: 2
  
    }
    .second {
      background-color: blue;
      position: absolute;
      left: 40px;
      top: 50px;
      z-index: 1;
    }
  </style>
  
  <div class="first"></div>
  <div class="second"></div>
```

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [January 5, 2021, 10:13am UTC](https://forum.kirupa.com/t/a-question-of-margin/645573/2 "2021-01-05T10:13:10Z")

</div>

It would be if not for the `top: 50px;` you gave only to the second/blue div. This gets applied on top of the margin… heh, “on top”.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 5, 2021, 3:34pm UTC](https://forum.kirupa.com/t/a-question-of-margin/645573/3 "2021-01-05T15:34:15Z")

</div>

Ah - so the margin-top and the position-top are additive for the blue div thus pushing the top edge of the blue div 50px below the top edge of the red div - correct?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [January 5, 2021, 3:53pm UTC](https://forum.kirupa.com/t/a-question-of-margin/645573/4 "2021-01-05T15:53:17Z")

</div>

Almost. The blue and red divs don’t interact with each other because they’re both positioned absolutely. So no matter where the red div is, it doesn’t affect the blue div. What affects the blue div is the combination of the margin and the top: 40 + 50 = 90.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 5, 2021, 4:41pm UTC](https://forum.kirupa.com/t/a-question-of-margin/645573/5 "2021-01-05T16:41:02Z")

</div>

OK - so that is very clear now - thank you.  
“Saving the world - one line of code at a time🙃”