Question

I want to my tag has exactly the same size as text in it, without any extra spaces in upper and lower parts like it shows in image (I mean the red rectangle)

this is the markup

<ul>
    <li><a href="#">content</a></li>
    <li><a href="#">content</a></li>
    <li><a href="#">content</a></li>
</ul>

​
and this is my JSFiddle

Thanks in advance.

Answer 1

The only way I know is to set the height based on the line-height:

li, a {
    line-height: 12px;
}

http://jsfiddle.net/EGDuU/12/