# Default margin

**URL:** <https://forum.kirupa.com/t/default-margin/645560>\
**Category:** web dev\
**Created:** [January 4, 2021, 12:59am UTC](https://forum.kirupa.com/t/default-margin/645560 "2021-01-04T00:59:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [January 4, 2021, 12:59am UTC](https://forum.kirupa.com/t/default-margin/645560/1 "2021-01-04T00:59:56Z")

</div>

Hello, Kirupa members,

I’ve build this page [https://honey-moon.netlify.app/](https://honey-moon.netlify.app/)

In the right site of the menu there is an icon “TALK TO US”, which I call “menu-cta” in the code.

 ![Screenshot 2021-01-04 at 01.57.44](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/6/69c3ac713a85af3f2098194276a216231033e917.png)

This icon should have 20px margin-top and 20px margin-right.

Considering that in my CSS, I have:

- {  
box-sizing: border-box;  
margin: 0;  
padding: 0;  
}

and  
margin-top: 20px;

Why it only moves about 10px from the top?

I know I can just put margin-top 40px, to adjust it, but I really want to understand why it has this behaviour.

Thank you very much in advance for your help.

Helena

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 4, 2021, 3:11am UTC](https://forum.kirupa.com/t/default-margin/645560/2 "2021-01-04T03:11:58Z")

</div>

Hi @Helena_G! Welcome back 🙂

The solution is to not set margin, but instead use relative positioning to get the **cta-menu** outside of the regular layout flow:

```
.menu-cta {
    background-color: #EE2655;
    color: #fff;
    font-family: "Heebo", sans-serif;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 24px;
    text-align: center;
    padding: 20px 15px;
    margin-right: 20px;
    /* margin-top: 20px; */
    display: block;
    position: relative;
    top: 20px;
}

```

Note that I removed the `margin-top` declaration and added the `position` and `top` properties. This should give you the behavior you are looking for.

As to why this didn’t work originally, this is a tricky one. The problem has to do with what you are trying to accomplish. You are trying to have a child element ( **menu-cta** ) go beyond the boundaries of ( **menu** ) by using margin and setting the menu’s height to be 80px. This causes some weird behavior where your content is compressed and expanded, whose exact details I am not too sure about. I just learned through experience that causes problems.

🥳

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [January 5, 2021, 2:01am UTC](https://forum.kirupa.com/t/default-margin/645560/3 "2021-01-05T02:01:32Z")

</div>

Thank you so much, @kirupa for the solution and the explanation. It’s clear to me now.

✅