{"id":7111,"date":"2017-03-21T19:48:54","date_gmt":"2017-03-21T14:18:54","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=7111"},"modified":"2022-08-04T19:26:41","modified_gmt":"2022-08-04T13:56:41","slug":"remove-unnecessary-space-outlook-hotmail-live-webmail-emails","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/","title":{"rendered":"Remove unnecessary space below image in Outlook.com\/ Hotmail\/ Live web emails"},"content":{"rendered":"\n\n\n\n<p>Apple is surely the <a href=\"https:\/\/emailclientmarketshare.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">top email client<\/a> but your list also includes subscribers using other email clients like Outlook and web versions like office365, outlook.com, Hotmail, live and other web version of outlook.<\/p>\n\n\n\n<p>Needless to say, emails render differently on every email client and device. If your email is not optimized according to these parameters, your subscribers will not be able to see the email like you want them to.<\/p>\n\n\n\n<p><em>Outlook.com\/live\/hotmail, for example, put forth a peculiar challenge when it comes to rendering images in emails.<\/em><\/p>\n\n\n\n<p>Let\u2019s unveil the technicality and coding enigma underneath.<\/p>\n\n\n\n<p>What these web mails do is that they automatically add <strong><em>&lt;div&gt;<\/em><\/strong> before the image. Adding this will lead to appearance of gap below the image. When the same background color as that of the image is used, it won\u2019t be much of a problem as it won\u2019t be visible enough. On the top of it, if text is followed by image, it again won\u2019t be visible. However, when background color is different or when two images are sitting one above another, this problem is clearly visible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why does this happen?<\/h2>\n\n\n\n<p>This happens as the <a href=\"https:\/\/email.uplers.com\/infographics\/ultimate-guide-email-client-hacks\/\">email clients<\/a> add div on its own; Strange why they keep adding their own tag in emails. Moreover, it also adds <strong><em>display:in-block<\/em><\/strong> so you see some extra space (around 3 to 5px) getting added at the bottom of image.<\/p>\n\n\n\n<p>Have a look at the below screenshots to understand what exactly happens.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/before-workaround-574x1024.png\" alt=\"before workaround\" class=\"wp-image-7126\" title=\"before workaround\"\/><\/figure><\/div>\n\n\n\n<p>This challenge is usually observed in latest apps, recently updated by them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to overcome this challenge?<\/h2>\n\n\n\n<p>Uplers have come up with an idea that can help you overcome this challenge.<\/p>\n\n\n\n<p>All you need to do is add below style in your &lt;head&gt; and remove the unnecessary space under the image.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p style=\"text-align: center;\"><span style=\"color: #ff0000;\"><strong>div{ display:block !important;}<\/strong><\/span><\/p><\/blockquote>\n\n\n\n<p>We obviously cannot remove the div which they are adding but then at least we can avoid adding extra space. So we overwrite the inline block with anotherblock to remove extra space.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Here&#8217;s how it looks after the workaround.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"1024\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/after-workaround-740x1024.png\" alt=\"after workaround\" class=\"wp-image-7125\" title=\"after workaround\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/after-workaround-740x1024.png 740w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/after-workaround-217x300.png 217w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/after-workaround-768x1063.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/after-workaround-101x140.png 101w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/after-workaround-624x864.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/after-workaround.png 1196w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/email.uplers.com\/email-service-provider-esp-integration\/?utm_source=blog&amp;utm_medium=CTA&amp;utm_campaign=remove-unnecessary-space-outlook-hotmail\" target=\"_blank\" rel=\"noopener noreferrer\"><strong><span style=\"color: #0000ff;\">Our email experts can help you with ESP integration and migration across 50+ ESPs.<\/span><\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>It surely feels like a huge accomplishment whenever we discover a workaround for the renderability issues of Outlook.<\/p>\n\n\n\n<p>Have you faced similar challenges with any email client?<\/p>\n\n\n\n<p>Share your ideas with us in the comment box below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apple is surely the top email client but your list also includes subscribers using other email clients like Outlook and web versions like office365, outlook.com, Hotmail, live and other web version of outlook. Needless to say, emails render differently on every email client and device. If your email is not optimized according to these parameters, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7137,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[381],"tags":[689,690],"class_list":["post-7111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-design","tag-outlookhotmailwebmail-emails","tag-unnecessary-space-in-outlookwebmailhotmail-emails"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tips to Remove Unnecessary Space Blow Images in Outlook.Com\/ Hotmail<\/title>\n<meta name=\"description\" content=\"Read the blog on how to remove unnecessary space below the images in Outlook.com\/Hotmail\/live web emails. There is an easy workaround for the email coders.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tips to Remove Unnecessary Space Blow Images in Outlook.Com\/ Hotmail\" \/>\n<meta property=\"og:description\" content=\"Read the blog on how to remove unnecessary space below the images in Outlook.com\/Hotmail\/live web emails. There is an easy workaround for the email coders.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-21T14:18:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-04T13:56:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/Outlook-workaround-for-image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"217\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kevin George\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin George\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/\",\"name\":\"Tips to Remove Unnecessary Space Blow Images in Outlook.Com\/ Hotmail\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/Outlook-workaround-for-image.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\"},\"description\":\"Read the blog on how to remove unnecessary space below the images in Outlook.com\/Hotmail\/live web emails. There is an easy workaround for the email coders.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/Outlook-workaround-for-image.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/Outlook-workaround-for-image.jpg\",\"width\":\"1170\",\"height\":\"470\",\"caption\":\"Outlook workaround for image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Remove unnecessary space below image in Outlook.com\/ Hotmail\/ Live web emails\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\",\"name\":\"Kevin George\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"caption\":\"Kevin George\"},\"description\":\"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/kevin-george-email\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tips to Remove Unnecessary Space Blow Images in Outlook.Com\/ Hotmail","description":"Read the blog on how to remove unnecessary space below the images in Outlook.com\/Hotmail\/live web emails. There is an easy workaround for the email coders.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/","og_locale":"en_US","og_type":"article","og_title":"Tips to Remove Unnecessary Space Blow Images in Outlook.Com\/ Hotmail","og_description":"Read the blog on how to remove unnecessary space below the images in Outlook.com\/Hotmail\/live web emails. There is an easy workaround for the email coders.","og_url":"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2017-03-21T14:18:54+00:00","article_modified_time":"2022-08-04T13:56:41+00:00","og_image":[{"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/Outlook-workaround-for-image.jpg","width":540,"height":217,"type":"image\/jpeg"}],"author":"Kevin George","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Kevin George","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/","url":"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/","name":"Tips to Remove Unnecessary Space Blow Images in Outlook.Com\/ Hotmail","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/Outlook-workaround-for-image.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa"},"description":"Read the blog on how to remove unnecessary space below the images in Outlook.com\/Hotmail\/live web emails. There is an easy workaround for the email coders.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/Outlook-workaround-for-image.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/03\/Outlook-workaround-for-image.jpg","width":"1170","height":"470","caption":"Outlook workaround for image"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/remove-unnecessary-space-outlook-hotmail-live-webmail-emails\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Remove unnecessary space below image in Outlook.com\/ Hotmail\/ Live web emails"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa","name":"Kevin George","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","caption":"Kevin George"},"description":"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/kevin-george-email\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/7111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=7111"}],"version-history":[{"count":32,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/7111\/revisions"}],"predecessor-version":[{"id":32695,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/7111\/revisions\/32695"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/7137"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=7111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=7111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=7111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}