Padding issues in Tumblr theme

Question

So I was designing some stuff for a Tumblr theme, and I came across a very annoying problem. I was coding the Reblog and Like buttons, and the Reblog button works fine, but for some reason the Like button gives itself like an extra 5px of padding on the bottom. It is not really a serious problem, but it's really annoying to me because I cannot find a way to get rid of it. I tried changing height, max height, positioning and all, and nothing got rid of the extra space at the bottom. It may be some stupid mistake on my part, or maybe It's just supposed to be like that, and I'm not realizing it because it's too late, but any help would be nice. Here is my test blog too in which I have the theme set up. If you look at the source, or mouseover the Like button you can see. http://mchickenposts.tumblr.com/

Edit: I could just extend the length of thee li, and add the cursor property so the bottom 5px isn't left out. But I wanted to know How i can get rid of it totally.

Here is my Html Code for the Posts, and the Css too.

.post_reblog_like{
    list-style-type:none;
    padding:0px;
    margin:0px;
    display:inline-block;
    float:right;
}
.post_reblog_like li{
    display:inline-block;
    opacity:.7;
}
.post_reblog_like li:hover{
    opacity:1;
} 
{block:Text}
                <div class="post_wrapper">
                    <div class="post_text">
                        <div class="post_text_body">
                            {block:Title}
                                <a class="PostTitle" href="{Permalink}">{Title}</a>
                            {/block:Title}
                            {block:NoteCount}
                                <a class="post_notes" href="{Permalink}">{NoteCountWithLabel}</a>
                                {/block:NoteCount}
                            <div class="PostBody">{Body}</div>
                        </div>
                            <div class="post_date">
                                {block:Date} 
                                    <a title="{DayOfWeek}, {Month} {DayOfMonth}, {Year} @ {12Hour}:{Minutes} {AmPm}" class="post_date_text" href="{Permalink}">{TimeAgo}</a>
                                {/block:Date}
                                <ul onmouseover="changeClass();" class="post_reblog_like">
                                    <li title="Reblog">{ReblogButton color="white" size="20"}</li>
                                    <li title="Like">{LikeButton color="white" size="20"}</li>
                                </ul>
                            </div>
                    </div>
                </div>
            {/block:Text}

Answer 1

I believe the issue is related to line-height (currently there is none defined).

.like_button {
    line-height: 0px;
}

Answer 2

Change the .like_button to a display: block and then float: left . Elements with display: inline and inline-block always add some space at the bottom for letters like 'y' or 'g'. Hope it helps someone!