how to remove gap between links in topnav-CodePudding

There's this annoying gap between each a element in .left, how do I remove it?

* {
    font-family: 'Raleway', sans-serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    --darkest-blue: #03045eff;
    --dark-blue: #023e8aff;
    --blue: #0077b6ff;
    --lighter-blue: #0096c7ff;
    --sea-blue: #00b4d8ff;
    --light-blue: #48cae4ff;
    --lightest-blue: #90e0efff;
    --sky-blue: #ade8f4ff;
    --white-blue: #caf0f8ff;
}

#topnav {
    background-color: rgb(19, 19, 19);
    height: 75px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
}

#topnav .left {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 100%;
}

#topnav a {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 300;
    padding: 20px;
    transition: all 0.2s ease-in-out;
}

#topnav a:hover {
    color: var(--sky-blue);
}

#topnav .section-seperator {
    width: 2px;
    height: 80%;
    background-color: white;
}

#topnav .right {
    display: flex;
    align-items: center;
    justify-content: right;
    flex: 1;
    height: 100%;
}

<div id="topnav">
    <div >
        <div id="logo">
            <a href="index.html">
                <img src="images/logo.png" alt="logo">
            </a>
        </div>
        <div ></div>
        <div >
            <a href="index.html">Home</a>
            <a href="blog.html">Blog</a>
            <a href="boxes.html">Boxes</a>
            <a href="login.html">Login</a>
            <a href="signup.html">Signup</a>
        </div>
    </div>
    <div >
        <a href="account.html" id="account">
            <i >account_circle</i>
        </a>
    </div>
</div>

At first, I didn't notice it, then when I did, I tried re-reading my code to see any margin attributes attached to any a elements. And as you expect, find nothing

CodePudding user response：

hello my friend you are using padding for each a element and the reason of this gap is you padding you can use padding-top or padding-bottom tag for removeing this gap this is your answer but i dont know why you use a element alonly without any li element this is your answer

        @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: 'Raleway', sans-serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

:root {
    --darkest-blue: #03045eff;
    --dark-blue: #023e8aff;
    --blue: #0077b6ff;
    --lighter-blue: #0096c7ff;
    --sea-blue: #00b4d8ff;
    --light-blue: #48cae4ff;
    --lightest-blue: #90e0efff;
    --sky-blue: #ade8f4ff;
    --white-blue: #caf0f8ff;
}

#topnav {
    background-color: rgb(19, 19, 19);
    height: 75px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
}

#topnav .left {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 100%;
}

#topnav a {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 300;
    /************************************************************
    
    change the value of padding for removing this gap
    
    *************************************************************/
    padding: 20px 0;
    transition: all 0.2s ease-in-out;
}

#topnav a:hover {
    color: var(--sky-blue);
}

#topnav .section-seperator {
    width: 2px;
    height: 80%;
    background-color: white;
}

#topnav .right {
    display: flex;
    align-items: center;
    justify-content: right;
    flex: 1;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My Website</title>
</head>

<body>
    <div id="topnav">
        <div >
            <div id="logo">
                <a href="index.html">
                    <img src="images/logo.png" alt="logo">
                </a>
            </div>
            <div ></div>
            <div >
                <a href="index.html">Home</a>
                <a href="blog.html">Blog</a>
                <a href="boxes.html">Boxes</a>
                <a href="login.html">Login</a>
                <a href="signup.html">Signup</a>
            </div>
        </div>
        <div >
            <a href="account.html" id="account">
                <i >account_circle</i>
            </a>
        </div>
    </div>
</body>

CodePudding user response：

Inside the #topnav .left selector you gave justify-content : left, actually left is not one among the possible values, change it to 'flex-start' (default). Anyways this did not trigger this gap issue. The gap is mainly due to the padding: 20px on all sides in #topnav a selector. If you want to get rid of the gap, make the padding only to top and bottom sides, make it as padding: 20px 0;