HP上にSNSの各ボタンを並べてみたら余分なスペースがあったり、ガタガタになってしまったので、今後きれいに横並びできるようにするための覚え書きです。
今回は、Twitter、Google+、Facebookの3つです。
横に並べる html
<ul class="sns-wrap">
<li class="twitter">
<!-- twitter のコード -->
</li>
<li class="gplus">
<!-- google+のコード -->
</li>
<li class="fb">
<!-- Facebook のコード -->
</li>
</ul>
デフォルトでは以下の様な状態です。

とりあえず、横並びにしてみる
.sns-wrap{
margin:20px auto;
padding:0;
overflow: hidden;
list-style: none;
}
.sns-wrap li{
float: left;
margin:0 10px 0 0;
}
すると、余白が・・・

Twitter は 124px、Google+は90pxぐらい自動的にwidth が指定されているようです。
なので以下のようにCSS修正
.sns-wrap{
margin:20px auto;
padding:0;
overflow: hidden;
list-style: none;
}
.sns-wrap li{
float: left;
margin:0 10px 0 0;
overflow: hidden;
}
.sns-wrap li.twitter{
width:90px;
}
.sns-wrap li.gplus{
width:60px;
}
.sns-wrap li.fb{
line-height: 1;
}
twitter とgoogle+はワイドを指定して、はみ出た部分はli にoverflow:hidden で対処しました。
Facebookで上部に余白ができるのは line-height:1 で余白を消すことができました。

こちらのサイト参考にさせていただきました:
TwitterやFacebookなどのソーシャルボタンを横に並べて設置する
http://s115.jp/wordpress/the-sort-method-next-to-the-social-buttons/