Sprite-3 | Sprite Curry Compiler | Frontend Framework library

I'm having problem with my sprite css, I've provided a jsfiddle so you can see what i mean. So as you can observe there are spaces beneath the image and I can't seem to find what the problem is. Is this because of the positioning? I tried using float but it only reduces the spaces.

What I want to accomplish is to remove the spaces underneath because it really looks ugly on my website having empty spaces.

PS. Also if I use absolute, It will overlap the text in my site.

JsFiddle

HTML

...

I am trying to figure out how to get rid of extra height in my inner

which contain tags. I have tried a css reset but it isn't doing a full reset as far as I can tell.

In the HTML and CSS below, I have 3 tags stacked vertically, each 32px. I want there to be no room between them and the

which contains them, I expect to have a height of 96px. You can see in the js fiddle, that there is space between the tags and the inner div has a height > 100px.

UPDATE The possible duplicate post linked to explains well what is happening:

By default, an image is rendered inline, like a letter. It sits on the same line that a, b, c and d sit on. There is space below that line for the descenders you find on letters like f, j, p and q. You can adjust the vertical-align of the image to position it elsewhere.

However, adjusting the vertical-align: top did not completely solve the problem since there was still extra height. In my case, it was necessary to set line-height:0 to completely remove all extra height.

The HTML:

...