CODEWITHSUNDEEP
htmlcssnavigationbar
rsanath
rsanath

Reputation: 1220

How to remove the gap between two navigation bar items?

There is a small gap between the two items in navigation bar. This is the html, css code:

    body{
            margin: 0px;
            font-family: sans-serif;
        }
        ul{
            padding: 15px 0px;
            background: grey;
            list-style-type: none;
        }
        li{
            display: inline;
        }
        a{
            border: 1px solid black;
            color: white;
            text-decoration: none;
            padding: 15px 15px;
        }
        a:hover{
            background: grey;
            color: black;
        }
        a:active{
            background: white;
        }
 
  <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Support</a></li>
    </ul>

Note the gap between the items

This is the output.

The gap is reduced if I set the margin of a tag to -1.

Upvotes: 1

Views: 107

Answers (7)

Reynante Daitol
Reynante Daitol

Reputation: 499

I added this to your css:

a {
  margin-right: -5px;
}

Output:

output screenshot

Upvotes: 1

Gerard
Gerard

Reputation: 15796

Removing space and redefining border definitions.

body {
  margin: 0px;
  font-family: sans-serif;
}

ul {
  padding: 15px 0px;
  background: grey;
  list-style-type: none;
  display: inline-block;
}

li {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  float: left;
  padding: 15px;
  text-align: center;
  min-width: 60px;
}

li:first-child {
  border-left: 1px solid black;
}

a {
  color: white;
  text-decoration: none;
  display: inline-block;
}

a:hover {
  background: grey;
  color: black;
}

a:active {
  background: white;
}
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Support</a></li>
</ul>

Upvotes: 1

Alohci
Alohci

Reputation: 83125

Add a space to hide the spaces...

        body{
            margin: 0px;
            font-family: sans-serif;
        }
        ul{
            padding: 15px 0px;
            background: grey;
            list-style-type: none;
        }
        li{
            display: inline;
        }
        a{
            border: 1px solid black;
            color: white;
            text-decoration: none;
            padding: 15px 15px;
        }
        a:hover{
            background: grey;
            color: black;
        }
        a:active{
            background: white;
        }

        /* Add this */
        li:after {
          content: ' ';
          font-size: 0;
        }
 
  <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Support</a></li>
    </ul>

Upvotes: 1

Dan Nagle
Dan Nagle

Reputation: 5425

It's because of the whitespace. There are a number of techniques you can use to fix the issue.

  1. Remove the space between the closing and opening li tags:

    <ul>
  <li>
  <a href="#">Home</a></li><li>
  <a href="#">Support</a></li><li>
  <a href="#">Contact</a></li>
</ul>

  2. Remove the closing li tag:

    <ul>
  <li><a href="#">Home</a>
  <li><a href="#">Support</a>
  <li><a href="#">Contact</a>
</ul>

  3. Use comments to remove the space:

    <ul>
  <li><a href="#">Home</a></li><!--
  --><li><a href="#">Support</a></li><!--
  --><li><a href="#">Contact</a></li>
</ul>

  4. Use font-size:0 for the ul element in the CSS:

    ul { font-size: 0; }
li { font-size: 16px; }

Upvotes: 1

Spitzbueb
Spitzbueb

Reputation: 5911

If I understood you correctly you have to set the margin of every element to 0:

* {
  margin: 0;
 }


* {
  margin: 0;
}

body {
  font-family: sans-serif;
}

ul {
  padding: 15px 0px;
  background: grey;
  list-style-type: none;
}

li {
  display:inline-block;
}

a {
  border: 1px solid black;
  color: white;
  text-decoration: none;
  padding: 15px 15px;
}

a:hover {
  background: grey;
  color: black;
}

a:active {
  background: white;
}
<ul>
  <li><a href="#">Home</a></li><!--
  --><li><a href="#">Support</a></li><!--
  --><li><a href="#">Contact</a></li><!--
  --><li><a href="#">Support</a></li>
</ul>

Upvotes: 1

Carl Binalla
Carl Binalla

Reputation: 5401

You can use this, the spacing is because of display:inline. Check here for more information about the spacing

body {
  margin: 0px;
  font-family: sans-serif;
}

ul {
  padding: 15px 0px;
  background: grey;
  list-style-type: none;
}

li {
  display:inline-block;
}

a {
  border: 1px solid black;
  color: white;
  text-decoration: none;
  padding: 15px 15px;
}

a:hover {
  background: grey;
  color: black;
}

a:active {
  background: white;
}
<ul>
  <li><a href="#">Home</a></li><!--
  --><li><a href="#">Support</a></li><!--
  --><li><a href="#">Contact</a></li><!--
  --><li><a href="#">Support</a></li>
</ul>

Upvotes: 1

j-printemps
j-printemps

Reputation: 1298

You can add display: table; to you <ul> element. This will remove the space.

body{
    margin: 0px;
    font-family: sans-serif;
}
ul{
    display: table;
    padding: 15px 0px;
    background: grey;
    list-style-type: none;
}
li{
    display: inline;
}
a{
    border: 1px solid black;
    color: white;
    text-decoration: none;
    padding: 15px 15px;
}
a:hover{
    background: grey;
    color: black;
}
a:active{
    background: white;
}
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Support</a></li>
</ul>

Upvotes: 2

Related Questions