title: Why not to use "vertical-align: top;" instead of "display: block;" on <img> in emails?
body: <p>This pattern:
  <code>&lt;img src=&quot;path/to/image.png&quot; width=&quot;420&quot; height=&quot;130&quot; style=&quot;display: block; border: none;&quot;&gt;</code>
  has become common, now it is sort of best practice. I see this is every article and in every project.</p>
  <p>If I understand correctly <code>display: block;</code> is being used to remove few pixels of empty space under the image caused by the fact that <code>&lt;img&gt;</code> is aligned to baseline by default.</p>
  <p>But why not to use <code>vertical-align: top;</code> then? This is more straightforward in the code and it doesn't cause confuses when <code>display</code> property needed for responsiveness:<a href="https://i.stack.imgur.com/CZshk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CZshk.png" alt="f" /></a></p>