{"id":1349,"date":"2011-05-18T02:11:44","date_gmt":"2011-05-18T02:11:44","guid":{"rendered":"http:\/\/bme2.flywheelsites.com\/blog\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/"},"modified":"2020-11-03T11:17:09","modified_gmt":"2020-11-03T11:17:09","slug":"html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email","status":"publish","type":"post","link":"https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/","title":{"rendered":"HTML Tips: How to Eliminate White Bars and Gaps in Your HTML Email"},"content":{"rendered":"<p>When coding a newsletter with HTML, there are several email clients you must account for and each has a slightly different way of handling images. If you\u2019re using Hotmail, Gmail or Outlook you may have noticed a thin white band or gap splitting one or more of the images in your HTML email. This also seems to be a problem with users of Firefox, Safari, Opera and Chrome (though not Internet Explorer).<\/p>\n<p>For Hotmail users, correcting the issue requires the simple insertion of the following code into the top of your HTML file:<\/p>\n<h4><b>&lt;style&gt;img {display:block}&lt;\/style&gt;<\/b><\/h4>\n<p>If you\u2019re using Gmail, an additional code is needed for individual images. Inside the image HTML, add this code<\/p>\n<h4>&lt;img style=&#8221;<b>display:block<\/b>&#8221; src=&#8221;exampleimage.jpg&#8221; alt=&#8221;example&#8221; \/&gt;<\/h4>\n<p>Google altered the way it displays images in mid-2010, which is when these gaps started to appear. So make sure to go through all, if any, of your <a href=\"https:\/\/benchmarkemail.com\/resources\/free-html-email-templates\">email templates<\/a> and newsletters that you still use from this time. Also make sure to send test emails to multiple email clients and open them with different browsers and hardware whenever possible to ensure that your newsletter is being displayed properly.<\/p>\n<p>For more information on engaging with multiple browsers, click the link to learn how to <a href=\"https:\/\/www.benchmarkemail.com\/blogs\/detail\/time-to-have-a-party-an-email=-readability-party\">Test Your Email Campaigns for Readability<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When coding a newsletter with HTML, there are several email clients you must account for and each has a slightly different way of handling images. If you\u2019re using Hotmail, Gmail or Outlook you may have noticed a thin white band or gap splitting one or more of the images in your HTML email. This also&hellip;<\/p>\n","protected":false},"author":44,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2171],"tags":[890,891,892,893,894],"class_list":["post-1349","post","type-post","status-publish","format-standard","hentry","category-beyond","tag-email-layout","tag-email-newsletter-troubleshooting","tag-gaps-in-html-email","tag-image-gaps-in-gmail","tag-white-bars"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML Tips: How to Eliminate White Bars and Gaps in Your HTML Email - in<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Tips: How to Eliminate White Bars and Gaps in Your HTML Email - in\" \/>\n<meta property=\"og:description\" content=\"When coding a newsletter with HTML, there are several email clients you must account for and each has a slightly different way of handling images. If you\u2019re using Hotmail, Gmail or Outlook you may have noticed a thin white band or gap splitting one or more of the images in your HTML email. This also&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/\" \/>\n<meta property=\"og:site_name\" content=\"in\" \/>\n<meta property=\"article:published_time\" content=\"2011-05-18T02:11:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-03T11:17:09+00:00\" \/>\n<meta name=\"author\" content=\"Benchmark Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benchmark Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\\\/\"},\"author\":{\"name\":\"Benchmark Team\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#\\\/schema\\\/person\\\/bb441e78bfef71cd3c31f51bbbbc627d\"},\"headline\":\"HTML Tips: How to Eliminate White Bars and Gaps in Your HTML Email\",\"datePublished\":\"2011-05-18T02:11:44+00:00\",\"dateModified\":\"2020-11-03T11:17:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\\\/\"},\"wordCount\":237,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#organization\"},\"keywords\":[\"email layout\",\"email newsletter troubleshooting\",\"gaps in html email\",\"image gaps in gmail\",\"white bars\"],\"articleSection\":[\"Beyond\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\\\/\",\"url\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\\\/\",\"name\":\"HTML Tips: How to Eliminate White Bars and Gaps in Your HTML Email - in\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#website\"},\"datePublished\":\"2011-05-18T02:11:44+00:00\",\"dateModified\":\"2020-11-03T11:17:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Tips: How to Eliminate White Bars and Gaps in Your HTML Email\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#website\",\"url\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/\",\"name\":\"in\",\"description\":\"Email Marketing Software\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#organization\",\"name\":\"Benchmark Internet Group, LLC\",\"url\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/benchmarkemail.com\\\/in\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2019\\\/09\\\/benchmark-logo.svg\",\"contentUrl\":\"https:\\\/\\\/benchmarkemail.com\\\/in\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2019\\\/09\\\/benchmark-logo.svg\",\"width\":1,\"height\":1,\"caption\":\"Benchmark Internet Group, LLC\"},\"image\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#\\\/schema\\\/person\\\/bb441e78bfef71cd3c31f51bbbbc627d\",\"name\":\"Benchmark Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g\",\"caption\":\"Benchmark Team\"},\"url\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/author\\\/benchmarkteam\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Tips: How to Eliminate White Bars and Gaps in Your HTML Email - in","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"HTML Tips: How to Eliminate White Bars and Gaps in Your HTML Email - in","og_description":"When coding a newsletter with HTML, there are several email clients you must account for and each has a slightly different way of handling images. If you\u2019re using Hotmail, Gmail or Outlook you may have noticed a thin white band or gap splitting one or more of the images in your HTML email. This also&hellip;","og_url":"https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/","og_site_name":"in","article_published_time":"2011-05-18T02:11:44+00:00","article_modified_time":"2020-11-03T11:17:09+00:00","author":"Benchmark Team","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Benchmark Team","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/#article","isPartOf":{"@id":"https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/"},"author":{"name":"Benchmark Team","@id":"https:\/\/www.benchmarkemail.com\/in\/#\/schema\/person\/bb441e78bfef71cd3c31f51bbbbc627d"},"headline":"HTML Tips: How to Eliminate White Bars and Gaps in Your HTML Email","datePublished":"2011-05-18T02:11:44+00:00","dateModified":"2020-11-03T11:17:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/"},"wordCount":237,"commentCount":0,"publisher":{"@id":"https:\/\/www.benchmarkemail.com\/in\/#organization"},"keywords":["email layout","email newsletter troubleshooting","gaps in html email","image gaps in gmail","white bars"],"articleSection":["Beyond"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/","url":"https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/","name":"HTML Tips: How to Eliminate White Bars and Gaps in Your HTML Email - in","isPartOf":{"@id":"https:\/\/www.benchmarkemail.com\/in\/#website"},"datePublished":"2011-05-18T02:11:44+00:00","dateModified":"2020-11-03T11:17:09+00:00","breadcrumb":{"@id":"https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.benchmarkemail.com\/in\/html-tips-how-to-eliminate-white-bars-and-gaps-in-your-html-email\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.benchmarkemail.com\/in\/"},{"@type":"ListItem","position":2,"name":"HTML Tips: How to Eliminate White Bars and Gaps in Your HTML Email"}]},{"@type":"WebSite","@id":"https:\/\/www.benchmarkemail.com\/in\/#website","url":"https:\/\/www.benchmarkemail.com\/in\/","name":"in","description":"Email Marketing Software","publisher":{"@id":"https:\/\/www.benchmarkemail.com\/in\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.benchmarkemail.com\/in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.benchmarkemail.com\/in\/#organization","name":"Benchmark Internet Group, LLC","url":"https:\/\/www.benchmarkemail.com\/in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.benchmarkemail.com\/in\/#\/schema\/logo\/image\/","url":"https:\/\/benchmarkemail.com\/in\/wp-content\/uploads\/sites\/11\/2019\/09\/benchmark-logo.svg","contentUrl":"https:\/\/benchmarkemail.com\/in\/wp-content\/uploads\/sites\/11\/2019\/09\/benchmark-logo.svg","width":1,"height":1,"caption":"Benchmark Internet Group, LLC"},"image":{"@id":"https:\/\/www.benchmarkemail.com\/in\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.benchmarkemail.com\/in\/#\/schema\/person\/bb441e78bfef71cd3c31f51bbbbc627d","name":"Benchmark Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g","caption":"Benchmark Team"},"url":"https:\/\/www.benchmarkemail.com\/in\/author\/benchmarkteam\/"}]}},"_links":{"self":[{"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/posts\/1349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/comments?post=1349"}],"version-history":[{"count":0,"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/posts\/1349\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/media?parent=1349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/categories?post=1349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/tags?post=1349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}