照片 outlook 2013 的 html 电子邮件边距

Question

我正在制作 html 电子邮件。我在 gmail 中做了这个:

但在 outlook 中它看起来像这样:

我该如何解决这个问题？

<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 前缀才有效。

尝试用填充改变边距:

.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>