{"id":277,"date":"2021-01-22T19:29:00","date_gmt":"2021-01-22T19:29:00","guid":{"rendered":"https:\/\/wshop.fi\/eng\/?p=277"},"modified":"2021-03-22T19:31:44","modified_gmt":"2021-03-22T19:31:44","slug":"images-in-html-emails-still-separate-in-gmail","status":"publish","type":"post","link":"https:\/\/wshop.fi\/eng\/images-in-html-emails-still-separate-in-gmail\/","title":{"rendered":"Images in HTML Emails: Images Still Separate in Gmail?"},"content":{"rendered":"\n<p>Have you ever made an&nbsp;<strong>HTML email<\/strong>&nbsp;with&nbsp;<strong>images<\/strong>&nbsp;in it and it looked good in most email clients, but not gmail or possibly hotmail?<\/p>\n\n\n\n<p>You\u2019ve made sure to build your HTML email using&nbsp;<strong>tables<\/strong>&nbsp;instead of divs, used&nbsp;<strong>colspans,&nbsp;<\/strong>specified heights and widths. But\u2026the&nbsp;<strong>images still separate in gmail<\/strong>.<\/p>\n\n\n\n<p>GMail adds margins to images&nbsp;that are displayed inline. So simply make the styling for the image&nbsp;<code>display: block;<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Inline Images in HTML Emails<\/h2>\n\n\n\n<p>The code for the image will look something like this when you put images in your HTML email.<\/p>\n\n\n\n<p><code>&lt;img src=\"NickIsCool.jpg\" style=\"display: block;\" \/&gt;&nbsp;<\/code><\/p>\n\n\n\n<p>This is actually a great reminder to myself. I so often forget to add display: block; when building my own HTML Emails. I even forget that adding&nbsp;display: block; to images is what fixes it (most of the time).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever made an&nbsp;HTML email&nbsp;with&nbsp;images&nbsp;in it and it looked good in most email clients, but not gmail or possibly hotmail? You\u2019ve made sure to build your HTML email using&nbsp;tables&nbsp;instead of divs, used&nbsp;colspans,&nbsp;specified heights and widths. But\u2026the&nbsp;images still separate in gmail. GMail adds margins to images&nbsp;that are displayed inline. So simply make the styling for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":278,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":{"0":"post-277","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-coding"},"_links":{"self":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/comments?post=277"}],"version-history":[{"count":1,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/277\/revisions"}],"predecessor-version":[{"id":279,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/277\/revisions\/279"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media\/278"}],"wp:attachment":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media?parent=277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/categories?post=277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/tags?post=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}