Default margin

[Helena_G]

Hello, Kirupa members,

I’ve build this page 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.

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

[kirupa]

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.

[Helena_G]

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