Question 290679 in Html Question posted in
Some basic documentation can be found here.

Html – Why are the distances different?

I have these codes in SCSS and HTML (Astro)

<header class="mainHeader">
        <a href="/"><img src="/images/mainLogo.png" alt="Логотип " id="headerLogo"></a>
        <div id="links">
                <a href="/products">Продукты</a>
                <a href="/sale">Акции</a>
                <a href="/contacts">Контакты</a>
        </div>
</header>

.mainHeader {
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;

    #links {
        margin-left: auto;
        margin-right: 10%;

        a {
            color: $green;
            text-decoration: none;

            font-family: 'Montserrat', sans-serif;
            font-weight: 550;
            font-size: 1.3rem;

            margin-right: 50px;

            &:last-of-type {
                margin-right: 0;
            }
        }
    }

    #headerLogo {
        position: relative;
        height: 3em;
        margin-top: 0.8em;
        margin-bottom: 0.7em;
        left: 10%;
    }
}

But distance between left side and image is MUCH smaller than distance between buttons and right side (I hope you can see image well).

Why does it happen and how do I fix it?

The distance is equal only if I make

...
    #headerLogo {
        position: relative;
        height: 3em;
        margin-top: 0.8em;
        margin-bottom: 0.7em;
        left: 75%; /* Changed from 10% to 75% */
    }
Tags:

2

Answers


  1. 0

    Instead of increasing the left property of #headerLogo to 75%, which looks like more of a workaround than a solution, try applying a similar margin technique to the #logo. This should balance the space on both sides in a more responsive and flexible manner:

    .mainHeader {
    
    justify-content: space-between; // Change from 'center' to 'space-between'

    #headerLogo {
        ...
        margin-left: 10%;
    }

    #links {
        ...
        margin-right: 10%;
    }
}

    By setting justify-content: space-between; on .mainHeader, you distribute the space between the logo and the links equally. Then, adjusting the margins of both #headerLogo and #links ensures symmetrical padding from the edges of the header.

    Good luck!

    Login or Signup to reply.
  2. 0

    Ah, OK, so the margin-left: 10%; and margin-right: 10%; values in your SCSS are calculated based on the width of the parent element. This CSS rule is pushing #links to the right edge of its containing block (.mainHeader) because it sets the left margin to automatically occupy the available space. This will be why there is more space on the right side of #links compared to the left side of #headerLogo.

    .mainHeader {
   background-color: var(--white);
   display: flex;
   align-items: center;
   justify-content: space-between; /* Use space-between to evenly distribute items */
}

#headerLogo {
   position: relative;
   height: 3em;
   margin-top: 0.8em;
   margin-bottom: 0.7em;
   margin-left: 10%; 
}

#links {
   margin-left: auto;
   margin-right: 10%;

   a {
      color: $green;
      text-decoration: none;

      font-family: 'Montserrat', sans-serif;
      font-weight: 550;
      font-size: 1.3rem;

      margin-right: 50px;

      &:last-of-type {
         margin-right: 0;
      }
   }
}

    So this SCSS code uses justify-content: space-between; in .mainHeader to evenly distribute child elements, which should give equal spacing on both sides of #headerLogo and #links.

    Hope that works. Let me know.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search