A gap between list-items

Question

I made a list containing several players but there are gaps between the list-items where there shouldn't be gaps. Here's the link: http://www.ostameerbeke.be/spelerskernB.html .

HTML:

        <ul id="beloften">           
            <li><a href="B1.jpg" rel="shadowbox[spelers]"><img src="B11.jpg" width="180px" alt="speler"/></a><p><strong>BUGDAYCI</strong> </p><p>Taner</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>CIRPI</strong> </p><p>Umit</p></li>
            <li><a href="B3.jpg" rel="shadowbox[spelers]"><img src="B31.jpg" width="180px" alt="speler"/></a><p><strong>DE BEULE</strong> </p><p>Bram</p></li>
            <li><a href="B4.jpg" rel="shadowbox[spelers]"><img src="B41.jpg" width="180px" alt="speler"/></a><p><strong>DE CONINCK</strong> </p><p>Toon</p></li>
            <li><a href="B5.jpg" rel="shadowbox[spelers]"><img src="B51.jpg" width="180px" alt="speler"/></a><p><strong>DE COOMAN</strong> </p><p>Rik</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>DE COOMAN</strong> </p><p>Wim</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>DE KEGEL</strong> </p><p>Gregory</p></li>
            <li><a href="B8.jpg" rel="shadowbox[spelers]"><img src="B81.jpg" width="180px" alt="speler"/></a><p><strong>DE NUTTE</strong> </p><p>Bram</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>DE REUSE</strong> </p><p>Laurens</p></li>
            <li><a href="B10.jpg" rel="shadowbox[spelers]"><img src="B101.jpg" width="180px" alt="speler"/></a><p><strong>DE SMET</strong> </p><p>Sigi</p></li>
            <li><a href="B11.jpg" rel="shadowbox[spelers]"><img src="B111.jpg" width="180px" alt="speler"/></a><p><strong>HAJIOUI</strong> </p><p>Yassin</p></li>
            <li><a href="B12.jpg" rel="shadowbox[spelers]"><img src="B121.jpg" width="180px" alt="speler"/></a><p><strong>LETTENS</strong> </p><p>Daan</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>LEYSSENS</strong> </p><p>Bedner</p></li>
            <li><a href="B15.jpg" rel="shadowbox[spelers]"><img src="B151.jpg" width="180px" alt="speler"/></a><p><strong>MOYSON</strong> </p><p>Pieter</p></li>
            <li><a href="B16.jpg" rel="shadowbox[spelers]"><img src="B161.jpg" width="180px" alt="speler"/></a><p><strong>NOTAERTS</strong> </p><p>Kevin</p></li>
            <li><a href="B17.jpg" rel="shadowbox[spelers]"><img src="B171.jpg" width="180px" alt="speler"/></a><p><strong>PAPPAERT</strong> </p><p>Pieter</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>ROBLEDO GONZALEZ</strong> </p><p>Adrian</p></li>
       </ul>

And Css:

    #beloften {
  list-style-type: none;
  width: 1000px;
  margin: 0px auto;
  padding: 0px;
}

#beloften li {
  margin: 0px auto;
  float: left;
  width: 170px;
  padding: 12px;
  text-align: center;
}

What am i doing wrong?

Here is the working Jsfiddle of this code: Working example

Answer 1

Remove the padding

#beloften li {
  margin: 0px auto;
  float: left;
  width: 170px;
  padding: 12px; /* here */
  text-align: center;
}

Alternatively, have the padding be included in the width calculations by using box-sizing .

#beloften li {
    margin: 0px auto;
    float: left;
    width: 170px;
    padding: 12px;
    text-align: center;
    box-sizing: border-box; /* add this */
}

Answer 2

You could do text-align: center on the parent:

 #beloften {
    text-align: center; /* add this */
    list-style-type: none;
    width: 1000px;
    margin: 0px auto;
    padding: 0px;
}

then remove the float from the list items and display them inline-block:

#beloften li {
    display: inline-block; /*add this */
    margin: 0px auto;
    /* float: left; */  /* remove this */
    width: 170px;
    padding: 12px;
    text-align: center;
}

Which results in what I think you're after:

http://imgur.com/ESovzet

Answer 3

Remove the float from the list items and display them inline-block:

#beloften li {
display: inline-block;
margin: 0px auto;
width: 170px;
padding: 12px;
text-align: center;

}

Answer 4

Having looked at your page i can see what your problem is.

You player images are 180x180 but your holder image is 180x182 the extra height on the holder images is causing it to display wrong.

Try:

1. Recreating the holder images as 180x180

2. Adding on a max-height: 180px; to your img element

Answer 5

Remove the float from the list items and display them inline-block:

Css Code:

#beloften li {
    display: inline-block;
    margin: 0px auto;
    /* float: left; */ Remove
    width: 170px;
    padding: 12px;
    text-align: center;
}

Answer 6

DEMO

 #beloften li p { line-height: 0px; } 

use this with your css it will work