Google PlusOne button has some bottom margin

I'd like to know if the issue I see is just for my site or if this is a known issue.

I have some social widgets that align pretty well, but for some reason the PlusOne is not aligned correctly.

I used Firebug to compare it with the Facebook Like widget, a开发者_运维问答nd according to the CSS, they are both exactly the same height and neither have margins or padding. Their css looks identical.

<div>
        <fb:like layout="button_count" show_faces="false" width="90" action="like" font="verdana" colorscheme="light"></fb:like>

        <g:plusone size="medium"></g:plusone>

        <script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=d9550e2f-f25a-4e2e-ae45-7a51cf7e3d46&amp;type=website&amp;buttonText=Share%20item!&amp;embeds=true&amp;style=rotate"></script>
        &nbsp;<font face='Verdana, Arial, Helvetica, sans-serif' size='1'><a href='/mmh/recommend/send.php?prodid=$!product.id'><img src="/images/icons/icon_email.gif" border="0"> Email item</a></font>
</div>

Actually I have a link where the same thing i happening: http://news.makemeheal.com/celebrity-plastic-surgery/jennifer-aniston-weighs-on-prince-williams-hair-loss/ (if necessary, reduce your window size so Fbook and G+ are on the same line)

Use this:

<span style="position:relative; top:3px">
<div class="g-plusone" data-size="small" data-annotation="none"></div>
</span>

Had same issue. I put the Google+ code in a <div> and used CSS to limit the max-height property of <div> to 70px and it worked.

Put a div (class=froogle) around the +1 button, float them all and then style as you want. It worked for me:

.facebook-like, .twitter-share-button, .froogle {
  float: left;
  margin-right: 10px;
}

You could try using relative positioning, e.g. add the following CSS to the G+ button:

position: relative;
top: 5px; /* Or whatever looks right */

Although, while it may fix your problem it doesn't exactly show the cause of the issue.