Misalignment of Facebook & Twitter buttons

Question

The page contains two buttons, from twitter and from facebook.

What I\'m observing in Firefox 3.5.15 is:

1. While the page is loading, the buttons are more or

Answer 1

Now in September 2020 a new change from Facebook. The button height is always 28px for small or large button.

To align the buttons:

Step 1: Place both buttons inside a div

     

     
     

     Tweet

Step 2a: Set the line-height of the div as 11px
or
Step 2b: Set font-size as 1px

.socialMedia {
    float: right;
    width: 250px;
    display: block;
    padding-top: 25px;
    text-align: right;
    line-height: 11px
}

or

Step 3: Set height as 20px
The generated span inside the Facebook div is force to have the same height as Twitter iframe of 20px:

div.fb_iframe_widget > span {
    height: 20px !important
} 

The above values are for the small button. For the large buttons, the values must be changed properly.