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
[/sourcecode]
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!