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

Some weird vertical space between list elements in my Navbar that should not be ther – Html

Screenshot of the Marked Space
As you can see in the Screen, There is some vertical space in-between the list items, and idk how I can remove said thing, I’ve did it before but can’t seem to find how based on my old project and the Internet, and yes, maybe I’m just dumb and it’s obvious if i have the answer lmao.
Thanks in advance for an answer.

Html:

<header>
    <nav>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Wiki</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Join the Team</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </nav>
</header>

Stylesheet:

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    background-color: rgba(32,39,50,1.00);
    overflow: hidden;
}

li, a{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: white;
    text-decoration: none;
}

header{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
}
.nav-links{
    list-style: none;
}
.nav-links li{
    display: inline-block;
    padding: 20px 20px;
}
.nav-links li a{
    transition: all 0.3s ease 0s;
}
.nav-links li a:hover{
    color: rgba(224,88,255,1.00)
}

Thought it was the overflow:hidden, but that only got rid of some overflow I had on the right side, which is good but was not the solution.
And i just scanned for like an hour through an old project where I had that sorted out but just didnt spot it, feeling very dumb rn.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Changing .nav-links li{ display: inline-block; padding: 20px 20px; } to .nav-links li { display: inline; padding: 20px 20px 0 0; } did the trick and removed the spaces in between my Elements. Smthng about inline-block created these spaces, but I recommend everyone to just use a Flexbox instead, you can easily learn it here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


  2. 0

    Inline elements have space between them, unless in your HTML they have no space between them. There are a number of potential solutions, but my favourite is to use flexbox.

    Login or Signup to reply.
  3. 0

    Change:
    .nav-links li{ display: inline-block; padding: 20px 20px; },
    to: .nav-links li { display: inline; padding: 20px 20px 0 0; }
    And remove padding: 0px; margin: 0px; from *{}

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

Back To Top
Search