html - Outlook2013の写真のhtmlメールマージン

Question

HTMLメールを作成しています。私はgmailでこれを作りました:

しかし、見通しでは次のようになります。

どうすればこの問題を解決できますか?

<img src="http://leavingstone.me/dev/Images_For/MoneyMan/FB.png" align="left" style="width: 29px; height: 29px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 2px;display: block;line-height: 100%;">

JSFIDDLE

Answer 1

border-radiusがメールでサポートされているかどうかを確認してください: Link。
そのために画像を使用することをお勧めします。
また、wendor プレフィックスは、電子メールがブラウザ経由で表示される場合にのみ有効です。

marginパディングで変更してみてください：

.soc {
  width: 15px;
  height: 15px;
}
.wrapper {
  padding: 2px;
  display: inline-block;
}
.facebook {
  background-color: blue;
}
.twitter {
  background-color: cyan;
}
.google-plus {
  background-color: red;
}

<div class="socials">
  <div class="wrapper">
    <div class="facebook soc"></div>
  </div>
  <div class="wrapper">
    <div class="twitter soc"></div>
  </div>
  <div class="wrapper">
    <div class="google-plus soc"></div>
  </div>
</div>