システムから利用者に送信する通知メールをカスタマイズする作業を行った際、スタイルシート（CSS）で指定したHTMLメールを作成したのに、Outlookで受信するとスタイルが適用されていませんでした。Visual Studio上やアプリのWeb管理コンソール上でプレビューして確認した際は、HTMLコードは問題なかったはずなのですが・・・
とくに、余白の設定やフォントの指定が効かないところがあるようです。
構成はテーブルで定義
HTMLの余白を制御したり配置を柔軟に変更するために、昨今ではtableタグを使わず、divタグを使ってデザインしていくことが当たり前になっています。その常識でデザインしたHTMLメールはOutlookでは意図した通りの余白が表示されません。
以下はdivタグにマージンやパディングを指定してみた結果です。1番上の通り、設定した余白がすべてなくなっちゃいました。苦し紛れに改行タグを入れてみた結果が2番目です。上に1行の余白が作れましたが、左右にもほしいですよね。そこで、テーブル構造でパディングを指定した結果が3番目です。この場合のみ、設定どおりの表示となりました。
つまり、HTMLメールの構成はテーブル（tableタグ）で定義すべき、ということです。
フォントは直接指定、そしてPタグを利用
フォントの例でいうと、例えば以下のようにCSSでfont-familyとして"游ゴシック"として指定したのですが、上の文字列はシステムデフォルトの"MSゴシック"、下の文字列は指定した通り"游ゴシック"で表示されました。
この違いは、使用しているタグにあります。
<span style="font-family: 'Segoe UI', '游ゴシック'">テストです。ABC</span><br /> <p>テストです。ABC</p>
なんと、spanタグでのスタイルの指定が無効だったのです。2行目についてPタグで指定するとCSSで指定したフォントが使われました。なお、最初はPタグではなくdivタグにスタイルを指定していました。spanタグ同様にOutlook上は認識してくれなかったため、Pタグに変えたところめでたくスタイルが意図通りに設定されたということです。
上記より、フォントを指定したい場合はPタグ（またはPreタグ）を使用すべき、ということです。
最後に
HTMLメールと実際のWebページは、全く別物であると考えた方がよさそうです。別物と言わないまでも、HTMLメールは時代が遅れていると考え、従来重宝していたタグを使う方が安全（意図した通りに動作する）だと思いました。