HTML & CSS navbar spacing

Question

HTML/CSS NOOB WARNING

Hi,
I'm redesigning this navbar for practice purposes. Currently, my navbar looks like this.
Here's my HTML code:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Positioning | Home</title>
        <link rel="shortcut icon" href="Images/favicon.ico">
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

Here's my CSS code:

body {
    margin: 0;
    padding: 0;
    background-color: #44accf;
}

header nav ul {
    margin: 0 20px;
    height: 50px;
    background-color: #b7d84b;
}

header nav li {
    height: 50px; 
    list-style-type: none;
    display: inline;
    border-right: 1px solid black;
}

header nav a {
    text-decoration: none;
    color: white;
}

I have tried adding height to various elements, padding, margins, etc., but I can't figure out how to do this. Please help!

score 0 · Accepted Answer · answered Jun 13 '18 at 23:15

For the purposes of this example there's no need to use nested CSS selectors. CSS is read from right to left. Because of this, the nesting is redundant and can actually lead to more problems.

Creating menus like this can be a bit tricky because of the lack of vertical centering options that CSS has to offer. So, you're stuck using some pixel sizes that just end up working after you try it a few times.

To get this to work you need to add some padding to your li tags. Anchor tags are always inline elements so setting padding on those only makes them move left to right.

body {
    margin: 0;
    padding: 0;
    background-color: #44accf;
}

ul {
    margin: 0 20px;
    height: 50px;
    background-color: #b7d84b;
}

li {
    list-style-type: none;
    display: inline-block;
    border-right: 1px solid black;
    padding: 16px;
}

a {
    text-decoration: none;
    color: white;
}

This should do the trick: https://jsfiddle.net/7bht51aL/6/

HTML & CSS navbar spacing

1 Answers1