Remove vertical spacing around inline-block LI (list items)

I struggled with a minor issue in HTML for a few hours off an on during a project that was just really bothering me.  Basically, I had a few LIs that I was displaying as inline-block (horizontally stacked side by side):

<ul>
     <li>Item 1</li>
     <li>Item 1</li>
     <li>Item 1</li>
</ul>

When the rows would naturally wrap, there was a tiny gap between rows (as if there was a top margin or padding). Like I said, I struggled off and on a few hours (in between stopping and doing something else more important) with all kinds of tricks:

  • I tried setting the LIs font-size to 0
  • I tried making sure the LIs margin and padding was set to 0
  • I tried both of the above to the UL
  • I tried coding the lis as all 1 line in the html source (removing white space)

Nothing really worked.  Most of the solutions said to not use inline-block for the LIs and instead using just block and float: left.  That worked, however I had animation on the page that would inject between items and the animation had horrible performance once I switched to using floats.

Solution!!

Finally I found a random stack overflow thread that suggested checking line-height on the UL and LI.  I checked the LI first, setting it to 0.  That just messed up the text inside and didnt fix the gap.  Forcing line-height to 0 in the main UL and then setting it appropriately on the LI (to something normal like 1.1em) worked like a charm!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s