CODEWITHSUNDEEP
htmlcss
Saiju
Saiju

Reputation: 350

How can we remove space between two li?

I have the following HTML:

<ul class="navlist">
    <li><a href="index.html">Home</a></li>
    <li><a href="agenda.html">Agenda</a></li>
    <li><a href="presenters.html">Presenters</a></li>                       
</ul>

And I'm using this CSS:

.navlist {  
    padding: 10px 0 0;
    margin: 0;
    list-style-type: none;
    height: 33px;
}

.navlist li a {   
    text-decoration: none;
    font-size: 18px;
    color: white;
    background: #63B3E4;
    padding: 10px 45px 12px;
}

.navlist li a:hover {
    color: #63B3E4;
    background: white;
}

.navlist li {display: inline;}

As shown in a fiddle, there is whitespace between the li elements. How do I remove that whitespace?

Upvotes: 3

Views: 97

Answers (5)

Chris Lam
Chris Lam

Reputation: 3614

The reason is that you set the LI as inline elements, the spaces are caused by the "spaces"/linebreaks between the html code </li> and <li>.

We usually make the LI float: left instead:

http://jsfiddle.net/Lsbwt0n8/3/

Upvotes: 2

Vitorino fernandes
Vitorino fernandes

Reputation: 15981

you can remove the whitespace by adding font-size:0 to parent

.navlist {
  font-size: 0;
}


.navlist {
  padding: 10px 0 0;
  margin: 0;
  list-style-type: none;
  height: 33px;
  font-size: 0;
}
.navlist li a {
  text-decoration: none;
  font-size: 18px;
  color: white;
  background: #63B3E4;
  padding: 10px 45px 12px;
}
.navlist li a:hover {
  color: #63B3E4;
  background: white;
}
.navlist li {
  display: inline;
}
.navlist {
  font-size: 0;
}
<ul class="navlist">
  <li><a href="index.html">Home</a>
  </li>
  <li>
    <a href="agenda.html">Agenda</a>
  </li>
  <li>
    <a href="presenters.html">Presenters</a>
  </li>
</ul>

Upvotes: 1

Alohci
Alohci

Reputation: 83125

In this instance you can just add 

.navlist li:after { content: ' '; font-size:0; }

The white-space between the li elements will collapse into the pseudo element, which has a font-size of 0, so no gap is rendered.

.navlist {  
padding: 10px 0 0;
margin :0;
list-style-type: none;
height:33px;
}

.navlist li a {   
text-decoration: none;
font-size:18px;
color:white;
background:#63B3E4;
padding: 10px 45px 12px;
}

.navlist li a:hover {
color:#63B3E4;
background:white;}

.navlist li {display: inline;}

.navlist li:after { content: ' '; font-size:0; }
<ul class="navlist">
    <li><a href="index.html">Home</a></li><li>
        <a href="agenda.html">Agenda</a></li><li>
        <a href="presenters.html">Presenters</a></li>						
</ul>

Upvotes: 1

Michael Laszlo
Michael Laszlo

Reputation: 12239

In the HTML, remove all whitespace between each closing tag </li> and opening tag <li>. In addition, set display: inline-block on the list items.

Demonstration:

.navlist {  
    padding: 10px 0 0;
    margin: 0;
    list-style-type: none;
    height: 33px;
}

.navlist li {
    display: inline-block;
}

.navlist li a {
    text-decoration: none;
    font-size: 18px;
    color: white;
    background: #63B3E4;
    padding: 10px 45px 12px;
}

.navlist li a:hover {
    color: #63B3E4;
    background: white;
}
<ul class="navlist">
    <li><a href="index.html">Home</a></li><li>
        <a href="agenda.html">Agenda</a></li><li>
        <a href="presenters.html">Presenters</a></li>						
</ul>

Upvotes: 3

You Old Fool
You Old Fool

Reputation: 22966

In order to remove the white space, you must remove the white space.

<ul class="navlist">
    <li><a href="index.html">Home</a></li><li><a href="agenda.html">Agenda</a></li><li><a href="presenters.html">Presenters</a></li>            
</ul>

http://jsfiddle.net/Lsbwt0n8/5/

Upvotes: 0

Related Questions