parent element take margin of child element in html css?

Question

strong text

i dont understand why my header go down when i give to his child (.navigation) margin-top? if i give padding its okay my header stays on the top but why not by giving margin

i did research that ovorflow: auto fix the problem (yes it is) but why? can someone explain please

/* RESET */

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


/* VARIABLES */


:root {
    --pimery_color: #fff;
    --accent: #FBD784;
}



/* BODY */

body {
    font-family: 'Gilroy';
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: var(--pimery_color);
    background-color: #0B1D26;
}




/* HEADER */

.header {
    background-color: red;
}   

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:100px;
    
}

<header class="header">
      <div class="navigation">
        <p class="logo">MNTN</p>
        <nav class="nav">
          <ul>
            <a href="#">Equipment</a>
          </ul>
          <ul>
            <a href="#">About us</a>
          </ul>
          <ul>
            <a href="#">Blog</a>
          </ul>
        </nav>
        <div class="account">
          <img src="./img/svg/acc.png" alt="account logo for login" />
          <a href="#">Account</a>
        </div>
      </div>
    </header>

Please note that you are not using `ul` properly, causing your HTML to become invalid. `ul` can only have `li` children, not `a`. — connexo, Feb 11 '22 at 08:58

score 1 · Answer 1 · answered Feb 11 '22 at 08:49

That's an instance of a more general problem known as margin collapsing. If you have a parent element and a child element and you give the child element some margins, then these margins won't be contained by the parent element and they will go to the outside of the parent element.

There are ways to prevent this behaviour. One way to do that is adding some padding to the parent element: if you do that, the parent element padding will contain the child element margins on the inside.

parent element take margin of child element in html css?

1 Answers1