Tip: Removing default spacing between images in Blogger

Sometime in the switch to the new interface (perhaps?) a new default behavior was added to Blogger: margins were added to images with inline CSS. This is different than whatever margin or padding is adding, well, margins or padding to your web page. This is a default action and code that Blogger adds when it inserts an image into your blog post or page.

For example:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnERLZ2syari3H712bA_rXys2ZVIL7W1RYkJrYvDRzx5NlHIXThuIr5zUL20vrqcDIOANYAPN5bEEF9fz6Iab_GYV2bsx6ZB4qYjguiUA8W7_k7LDrfu1FBCJe9xJId7WvrYx21uiqjaTx/s1600/homepage2.png" imageanchor="1" style="margin-left: 1em; margin-bottom: 1em;"><img border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnERLZ2syari3H712bA_rXys2ZVIL7W1RYkJrYvDRzx5NlHIXThuIr5zUL20vrqcDIOANYAPN5bEEF9fz6Iab_GYV2bsx6ZB4qYjguiUA8W7_k7LDrfu1FBCJe9xJId7WvrYx21uiqjaTx/s320/homepage2.png" title="homepage" width="320"></a>

In this example you'll see style="margin-left: 1em; margin-bottom: 1em;" in the link that wraps the image.

This generally works fine if you're placing your images to the left with text wrapping, to the right with text wrapping, or centered.

When it becomes a problem is when you have a blog that typically uses large images to the full width of the column, and then likes to stack the images on top of each other with little or no space. That default behavior creates gaps that are annoying to get rid of; you'd need to go into the HTML for each and every post and remember to remove the margins in the wrapping HREF.

While the solution below might seem like a bit of an overkill, it shouldn't to the people that are frustrated by this default behavior with image-heavy blogs.

This code goes right above </head> in your template and uses JQuery to find each image in your blog article(s) at the time of the page being loaded and automatically removes the padding that is written in that default behavior.

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[

/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/

$(document).ready(function(){
$('.post-body').find('img').each(function(n, image){
        var image = $(image);
        image.parent().css('margin-left',0).css('margin-right',0).css('margin-top',0).css('margin-bottom',0);
    });
});
//]]></script>


View a clean version of the code.