CODEWITHSUNDEEP
htmlcss
Mustafa Karasu
Mustafa Karasu

Reputation: 13

Even though I reset the margins in css, there is still a space in between. What is the reason?

I reset the margins of all the elements, but there is a gap in between, which I don't know why. I tried it in chrome and firefox browsers. Same result in both. I'm waiting for your help. This is really important enter image description here

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

body{
    font-family: Arial, Helvetica, sans-serif;
}

#nav {
    padding: 20px;
}
#menu{
    list-style-type: none;
}

#menu li {
    display: inline-block;
    min-width: 140px;
    padding: 15px;
    text-align: center;
    background-color: rgb(48, 48, 48);
}

#menu li a{
    text-decoration: none;
    color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="nav">
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Links</a></li>
        </ul>
    </div>
</body>
</html>

Upvotes: 1

Views: 48

Answers (3)

A Haworth
A Haworth

Reputation: 36626

There are several ways you could get round this - probably the most inelegant would be to remove the newlines/spaces in your HTML list.

More practical probably is to have the ul display: flex. But you will have to consider what you want to happen responsive-wise. Do you ever need the elements to flow to the next line on a small device?

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

body{
    font-family: Arial, Helvetica, sans-serif;
}

#nav {
    padding: 20px;
}
#menu{
    list-style-type: none;
    display: flex;  
}

#menu li {
    min-width: 140px;
    padding: 15px;
    text-align: center;
    background-color: rgb(48, 48, 48);
}

#menu li a{
    text-decoration: none;
    color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="nav">
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Links</a></li>
        </ul>
    </div>
</body>
</html>

Upvotes: 0

anoymous guy
anoymous guy

Reputation: 1

i will fix it for you

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="nav">
            <ul id="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Courses</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Links</a></li>
            </ul>
        </div>
    </body>
    </html>
    
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body{
        font-family: Arial, Helvetica, sans-serif;
    
    }
    
    #nav {
        padding: 20px;
    }
    #menu{
        list-style-type: none;
    }
    ul {
        font-size: 0;
    }
    #menu li {
        font-size: 16px;
        display: inline-block;
        min-width: 140px;
        padding: 15px;
        text-align: center;
        background-color: rgb(48, 48, 48);
    }
    
    #menu li a{
        text-decoration: none;
        color: white;
    }

Upvotes: 0

Michał Sadowski
Michał Sadowski

Reputation: 2155

For the purpose of inline-block displayed elements, whitespace is treated as, well, whitespace. It's the spaces within your code. It would be easier if you were use #menu{ display: flex; } instead of making li into inline-blocks.

Upvotes: 1

Related Questions