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):

[sourcecode lang=”html”]

  • Item 1
  • Item 1
  • Item 1


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.


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!