如何在导航（HTML / CSS）中删除列表项之间的空间

Question

I'm having trouble removing the space between the li items in navigation, I already set the margin: 0px for the item & anchor (a link) but the space/gap still exist.

How can I remove those spaces?

 /* navigation styles */ nav { background: rgba(6, 19, 72, 1); background: linear-gradient(to bottom, rgba(6, 19, 72, 1) 0%, rgba(15, 31, 91, 1) 100%); } .nav { list-style: none; margin: 0; padding: 0; text-align: center; } .nav li { display: inline; margin: 0px; } nav ul.nav { width: 1120px; margin: 0 auto; min-width: 120px; } span.homeicon { width: 35px; height: 32px; display: inline-block; vertical-align: middle; position: relative; background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png'); background-size: cover; } .nav a { display: inline-block; padding: 10px; width: 120px; text-decoration: none; color: white; font-family: arial; line-height: 30px; height: 30px; margin: 0px; border: 1px solid #344da7; border-top: none; } a.nav_home { max-width: 50px; width: 50px !important; } .nav a:hover { background-color: #344da7; height: 100%; } 

 <nav> <ul class="nav"> <li><a href="" class="nav_home"><span class="homeicon"></span></a></li> <li><a href="">SPORTS</a></li> <li><a href="">LIVE CASINO</a></li> <li><a href="">SLOTS</a></li> <li><a href="">POKER</a></li> <li><a href="">PROMOTION</a></li> <li><a href="">BANKING</a></li> <li><a href="">AFFILIATE</a></li> </ul> </nav> 

fiddle

Answer 1

These spaces are actually caused by the white space in your html.

To solve, add float: left to your <li> tags:

.nav li {
    float: left;
}

To see that it really is the whitespace in your HTML, try removing it and testing:

 .nav { list-style: none; margin: 0; padding: 0; text-align: center; } .nav li { display: inline; margin: 0px; } nav ul.nav { width: 1120px; margin: 0 auto; min-width: 120px; } span.homeicon { width: 35px; height: 32px; display: inline-block; vertical-align: middle; position: relative; background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png'); background-size: cover; } .nav a { display: inline-block; padding: 10px; width: 120px; text-decoration: none; font-family: arial; line-height: 30px; height: 30px; margin: 0px; border: 1px solid #344da7; } a.nav_home { max-width: 50px; width: 50px !important; } .nav a:hover { background-color: #344da7; height: 100%; } 

 <nav> <h1> With Whitespace </h1> <ul class="nav"> <li><a href="" class="nav_home"><span class="homeicon"></span></a></li> <li><a href="">SPORTS</a></li> <li><a href="">LIVE CASINO</a></li> <li><a href="">SLOTS</a></li> <li><a href="">POKER</a></li> <li><a href="">PROMOTION</a></li> <li><a href="">BANKING</a></li> <li><a href="">AFFILIATE</a></li> </ul> <h1> Without Whitespace </h1> <ul class="nav"> <li><a href="" class="nav_home"><span class="homeicon"></span></a></li><li><a href="">SPORTS</a></li><li><a href="">LIVE CASINO</a></li><li><a href="">SLOTS</a></li><li><a href="">POKER</a></li><li><a href="">PROMOTION</a></li><li><a href="">BANKING</a></li><li><a href="">AFFILIATE</a></li> </ul> </nav> 

Answer 2

Try looking at https://css-tricks.com/fighting-the-space-between-inline-block-elements/

You might want to try using display: flex; instead https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

The spaces are caused by white spaces. You should make sure that there are no spaces in between each li .

The best way to do so IMO:

<ul class="nav"><!--
    --><li><a href="" class="nav_home"><span class="homeicon"></span></a></li><!--
    --><li><a href="">SPORTS</a></li><!--
    --><li><a href="">LIVE CASINO</a></li><!--
    --><li><a href="">SLOTS</a></li><!--
    --><li><a href="">POKER</a></li><!--
    --><li><a href="">PROMOTION</a></li><!--
    --><li><a href="">BANKING</a></li><!--
    --><li><a href="">AFFILIATE</a></li>
</ul>

Sure, you can change your entire layout to using floats, but that is really not the best way, and kind of going backwards. inline-block was created specifically to address the problems with using floats for layout.

Answer 4

To remove the space between the navigation items, just do this:

ul {
    font-size: 0;
}