{"id":101,"date":"2017-05-12T11:46:20","date_gmt":"2017-05-12T11:46:20","guid":{"rendered":"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?p=101"},"modified":"2017-05-12T19:20:17","modified_gmt":"2017-05-12T19:20:17","slug":"html-email-whitespace-gaps","status":"publish","type":"post","link":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-whitespace-gaps\/","title":{"rendered":"HTML Email &#8211; Remove Whitespace and Gaps In Between Table Rows"},"content":{"rendered":"<h2>HTML Email &#8211; Space Between Table Rows<\/h2>\r\n<p>In this post you will learn how to remove unwanted whitespace or gaps that may appear in between rows when creating an HTML Email. This usually occurs when the rows have a background color that is different from the parent table element. A program such as Litmus can be used to reveal the bug before releasing an email to your intended recipients. The following list of devices are the ones usually affected.<\/p>\r\n<ul>\r\n<li>iPhone 6 iOS 8<\/li>\r\n<li>iPhone 6+ iOS 8<\/li>\r\n<li>iPhone 6 iOS 9<\/li>\r\n<li>iPhone 6+ iOS 9<\/li>\r\n<li>iPhone 7 iOS 10.2<\/li>\r\n<li>iPhone 7+ iOS 10.2<\/li>\r\n<li>Android 5.1<\/li>\r\n<li>Android 6.0<\/li>\r\n<\/ul>\r\n<p>Our initial HTML consists of a parent <span class=\"white_space_pre\">&lt;table&gt;<\/span> element, which is used for viewing our emails in a browser. An inner <span class=\"white_space_pre\">&lt;table&gt;<\/span> element is used to contain and center the email in a desktop browser. The remainder of the code consists of three table rows with a yellow background color. The first and third rows are spacers that are each 25 pixels in height, while the middle row contains the line of text.<\/p>\r\n<h4>HTML<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\n&lt;!-- outer wrapper for displaying email in browser --&gt;\r\n&lt;table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;#ffffff&quot;&gt;\r\n    &lt;tr&gt;\r\n        &lt;td align=&quot;center&quot; valign=&quot;top&quot;&gt;\r\n\r\n            &lt;!-- inner wrapper that contains email --&gt;\r\n            &lt;table align=&quot;center&quot; width=&quot;600&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;#ffffff&quot;&gt;\r\n                &lt;tr&gt;\r\n                    &lt;td colspan=&quot;3&quot; bgcolor=&quot;#f5b21e&quot; align=&quot;left&quot; height=&quot;25&quot; style=&quot;font-size: 1px;&quot;&gt;&nbsp;&lt;\/td&gt;\r\n                &lt;\/tr&gt;\r\n                &lt;tr&gt;\r\n                    &lt;td colspan=&quot;3&quot; bgcolor=&quot;#f5b21e&quot; align=&quot;center&quot; valign=&quot;middle&quot; height=&quot;25&quot; style=&quot;font-size: 24px;font-weight:bold;font-family: Arial, Helvetica, sans-serif;color:#00008B;&quot;&gt;Hello world!&lt;\/td&gt;\r\n                &lt;\/tr&gt;\r\n                &lt;tr&gt;\r\n                    &lt;td colspan=&quot;3&quot; bgcolor=&quot;#f5b21e&quot; align=&quot;left&quot; height=&quot;25&quot; style=&quot;font-size: 1px;&quot;&gt;&nbsp;&lt;\/td&gt;\r\n                &lt;\/tr&gt;\r\n            &lt;\/table&gt;\r\n        &lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/div>\r\n<\/pre>\r\n<p>This is an image showing the gaps between each of the rows.<\/p>\r\n<img loading=\"lazy\" src=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/05\/whitespace-gaps-between-table-rows-html-email.jpg\" alt=\"whitespace gaps between table rows html email\" width=\"333\" height=\"61\" class=\"alignnone size-full wp-image-252\" srcset=\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/05\/whitespace-gaps-between-table-rows-html-email.jpg 333w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/05\/whitespace-gaps-between-table-rows-html-email-300x55.jpg 300w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/>\r\n<p>As you can see, the white background of the containing table bleeds through the gaps, showing what appears to be two faint white lines. Surrounding these three <span class=\"white_space_pre\">&lt;tr&gt;<\/span>&#8216;s with a table that has a yellow background will do the trick. See the updated HTML below, with our changes bolded.<\/p>\r\n<h2>Solution<\/h2>\r\n<h4>HTML<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\n&lt;!-- outer wrapper for displaying email in browser --&gt;\r\n&lt;table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;#ffffff&quot;&gt;\r\n    &lt;tr&gt;\r\n        &lt;td align=&quot;center&quot; valign=&quot;top&quot;&gt;\r\n\r\n            &lt;!-- inner wrapper that contains email --&gt;\r\n            &lt;table align=&quot;center&quot; width=&quot;600&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;#ffffff&quot;&gt;\r\n                &lt;tr&gt;\r\n                    <b>&lt;td colspan=&quot;3&quot; align=&quot;left&quot;&gt;\r\n                        &lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot; bgcolor=&quot;#f5b21e&quot;&gt;<\/b>\r\n                            &lt;tr&gt;\r\n                                &lt;td bgcolor=&quot;#f5b21e&quot; align=&quot;left&quot; height=&quot;25&quot; style=&quot;font-size: 1px;&quot;&gt;&nbsp;&lt;\/td&gt;\r\n                            &lt;\/tr&gt;\r\n                            &lt;tr&gt;\r\n                                &lt;td bgcolor=&quot;#f5b21e&quot; align=&quot;center&quot; valign=&quot;middle&quot; height=&quot;25&quot; style=&quot;font-size: 24px;font-weight:bold;font-family: Arial, Helvetica, sans-serif;color:#6a2875;&quot;&gt;Hello world!&lt;\/td&gt;\r\n                            &lt;\/tr&gt;\r\n                            &lt;tr&gt;\r\n                                &lt;td bgcolor=&quot;#f5b21e&quot; align=&quot;left&quot; height=&quot;25&quot; style=&quot;font-size: 1px;&quot;&gt;&nbsp;&lt;\/td&gt;\r\n                            &lt;\/tr&gt;\r\n                        <b>&lt;\/table&gt;\r\n                    &lt;\/td&gt;<\/b>\r\n                &lt;\/tr&gt; \r\n            &lt;\/table&gt;\r\n        &lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/div>\r\n<\/pre>\r\n","protected":false},"excerpt":{"rendered":"HTML Email &#8211; Space Between Table Rows In this post you will learn how to remove unwanted whitespace or gaps that may appear in between rows when creating an HTML Email. This usually occurs when the rows have a background color that is different from the parent table element. A program such as Litmus can [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[12],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Remove Unwanted Whitespace or Gaps In Between Rows in HTML Email<\/title>\n<meta name=\"description\" content=\"In this article you will learn how to remove unwanted whitespace, gaps, or spaces between rows when creating an HTML Email.\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Remove Unwanted Whitespace or Gaps In Between Rows in HTML Email\" \/>\n<meta property=\"og:description\" content=\"In this article you will learn how to remove unwanted whitespace, gaps, or spaces between rows when creating an HTML Email.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-whitespace-gaps\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Reference\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-12T11:46:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-12T19:20:17+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/05\/whitespace-gaps-between-table-rows-html-email.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Web Development Reference\",\"description\":\"Web Development Solutions Explained -- Easy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-whitespace-gaps\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/05\/whitespace-gaps-between-table-rows-html-email.jpg\",\"contentUrl\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/05\/whitespace-gaps-between-table-rows-html-email.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-whitespace-gaps\/#webpage\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-whitespace-gaps\/\",\"name\":\"How To Remove Unwanted Whitespace or Gaps In Between Rows in HTML Email\",\"isPartOf\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-whitespace-gaps\/#primaryimage\"},\"datePublished\":\"2017-05-12T11:46:20+00:00\",\"dateModified\":\"2017-05-12T19:20:17+00:00\",\"author\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\"},\"description\":\"In this article you will learn how to remove unwanted whitespace, gaps, or spaces between rows when creating an HTML Email.\",\"breadcrumb\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-whitespace-gaps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-whitespace-gaps\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-whitespace-gaps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-whitespace-gaps\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-whitespace-gaps\/\",\"name\":\"HTML Email &#8211; Remove Whitespace and Gaps In Between Table Rows\"}}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7o7aF-1D","_links":{"self":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/101"}],"collection":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":25,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/101\/revisions"}],"predecessor-version":[{"id":104,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/101\/revisions\/104"}],"wp:attachment":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/media?parent=101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/categories?post=101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/tags?post=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}