Remove spaces between images in blogger

Todays tutorial is a very common question in the blogger community – How to remove the white space between images in blogger. This is a long post because I cover multiple possibilities, but don’t be turned off trying. It really is quite easy to do once you follow the steps correctly.

The code below should work on the majority of blog templates, however it may not! It depends on the template you are using and what code you’ve added to it previously. You may need to look for similar code in your template. Uploading images via Blogger will wrap your images in extra code giving it a space. The script below should automatically remove this. I suggest uploading your images to a different hosting site, such as Photobucket or Flickr and then adding the code to your blog post. I will talk through how to do this below.

How to remove spaces between images

1. Firstly you need to make sure that there are no spaces in the blog post itself. Click on a blog post with multiple images, in compose mode you may see some spaces between the images. Removethe spaces so that the images are sitting one under another. Then click the HTML button and check for spaces between the images. Notice below that there is no space between the closing of one a tag and the opening of the next, they appear like ..</a><a href...  as they should. Also look for line breaks that look like <br /> or <br> and remove them. The code for two images in your blog post should look something like this (depending on image host – blogger default may look different) without spaces in between each image.

<a href="URL"><img src="IMAGE URL" border="0"/></a><a href="URL"><img alt="" src="IMAGE URL" border="0" /></a>

2. If there are no spaces in that, then the spacing is because of padding settings in your HTML, so we need to adjust these. Go to Template > Edit HTML, click into the HTML box and search (CMD & F/ CTRL & F) for the following codes. You may find one, all or a variation of them depending on your code so have a look around for them.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { 

.post img {

.post-body img {

table.tr-caption-container {

.post-body img, .post-body .tr-caption-container {

Below these codes, between the curly brackets { } you’ll should see padding, border or margin properties. Look for border, border-top, border-bottom, padding, padding-top, padding-bottom, margin, margin-top, margin-bottom, change the number to 0px. If you see something like $(....); for any of these properties, then change it to 0px. Example padding: $(image.border.small.size); change to padding: 0px;

 { border: 0px; padding: 0px; margin-bottom: 0px; margin-top: 0px; } 

3. If that doesn’t solve the problem, then the issue is with Bloggers image hosting. It automatically adds extra code and wraps it around your images. A further explanation is below but this script should automatically remove that extra code. To add it, click template, edit HTML and find </head>, right above this paste the following script

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

<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>

Q. How to remove the space completely?

I don’t recommend completely removing the gap for two reasons – one because the tiny bit of space helps to separate the images making it look neater and less cluttered, two because the minus figures may disrupt the images especially if using captions causing them to overlap. If you do want to completely remove the gap, use a minus value for the margin, example

.post-body img {
margin-top: -5px !important;
}

Q. Why does this happen in Blogger?

When you upload an image via Blogger, it wraps your image in extra code (shown below)

<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img width="800" height="500" border="0" src="image url 1"></div><br><div style="clear: left; float: left;margin-bottom: 1em; margin-right: 1em; text-align: center;"><img width="800" height="500" border="0" src="image url 2"></div><br>

If you were to manually fix this, you would remove the code so that it looks like this…

<div style="clear: left; float: left; margin-right: 1em; text-align: center;"><img width="800" height="500" border="0" src="image url 1"><img width="800" height="500" border="0" src="image url 2"></div>

and a much better and cleaner way to write it would be like this…

<img width="800" height="500" border="0" src="image url 1"><img width="800" height="500" border="0" src="image url 2">

But doing this one by one would take you forever! The script above should help, but again it depends on your template setup. This is why I recommend uploading images via a separate photo hosting site such as photobucket, flickr, tinypic. Blogger use Picasa web albums and your storage space will run out but more importantly when you manually copy the image code from an alternative hosting and paste it into blogger, it doesn’t alter the code. It’s plain and simply image code, it’s not wrapped in anything else. Therefore the code to remove gaps will work without any issues. For example, uploading via Photobucket will give you a code like this…

<a href="URL Link" target="_blank"><img src="Image Url" border="0" alt="Image Des"></a>

Placing multiple images into your post using an external image hosting site, one after another such as the following, means nothing gets wrapped in unwanted coding. Everytime you click on the image uploaded via Blogger and choose the size or position that code is being wrapped around the image making it harder to edit in the main HTML. Using photobucket and placing multiple images one after the other, you’ll see the following with no spaces, margins or padding…

<a href="URL Link" target="_blank"><img src="Image Url" border="0" alt="Image Des"></a><a href="URL Link" target="_blank"><img src="Image Url" border="0" alt="Image Des"></a><a href="URL Link" target="_blank"><img src="Image Url" border="0" alt="Image Des"></a>

Q. How should I upload via Blogger?

I’d suggest uploading your images at the correct size, one after another without any spaces and avoid adjusting them, which will add unwanted code.

Q. How do I upload using Photobucket, Flickr, etc?

Within your blog post, on the right under options, select “Interpret typed HTML” and click done. Create an account on an image hosting site, upload your images and get the html or img code. Paste this into your blog post under the compose tab, because you have the interpret typed HTML selected it will know that it’s html and will show the image. This saves you from clicking back and forth from HTML and compose.

Align images vertically + Add multiple images side by side

Check out this tutorial for adding images side by side in Blogger.