Correct the gap that appears on the LI element when used: after

Question

Please take a look at this script http://jsfiddle.net/EWUTX/

These are the styles used:

.box { position: relative; display:inline-block;} .box:after { position: absolute; width: 100%; height: 10px; background: green; content: ''; bottom:-10px; left:0; } 

I get a small 5px space when using the style in the li element but not in the div tag.

If I specify f ont-size: 0px , the space will disappear. But then all the text inside li disappears.

As the li font size increases, the gap widens.

Is there any style to get rid of this gap without hard-coding font sizes?

Run it again: http://jsfiddle.net/EWUTX/

thanks

PS: I actually create CSS frames inside where users can indicate status (using classes) like " started ", " not-started ", etc.

When used, the item should display a small panel below with different colors. Users can use this class for any item.

Answer 1

This space is part of reserved characters, such as "p". You will have the same gap unless you set the height for your div. If you want to remove this from an inline element like img, you can set the vertical alignment down:

 .box img { vertical-align: bottom; } 

See: http://jsfiddle.net/DhTzp/

Answer 2

His image, which breaks the gaps;

 img{ display: block; }