• Home
  • Clever Geek Handbook

    How can we remove the space between the two?

    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 am 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 the script , li

    there is a space between the elements . How do I remove those spaces?

    +3


    source to share


    5 answers


    The reason is that you are setting LI as inline

    eelements, spaces are caused by "spaces" / line breaks between the html code </li>

    and <li>

    .

    We usually do LI float: left

    :



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

    +2


    source


    In HTML, remove all spaces between each closing tag </li>

    and opening tag <li>

    . Also, set display: inline-block

    in 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>
    Run codeHide result


    +3


    source


    In this case, you can simply add

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

    The white space between the li elements will shrink into a pseudo-element whose font size is 0, so no spacing is shown.

    .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>
    Run codeHide result


    +1


    source


    you can remove spaces 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>
    Run codeHide result


    +1


    source


    To remove white space, you must remove the 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/

    0


    source






    More articles:


    All Articles