tutorial | remove spaces between images in blogger

remove space 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.

Please Read before commenting

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 bloggers (who’s default hosting is picasa) 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.

Download a backup of your template before editing your blogs HTML

How to remove spaces between images – The Code

Firstly you need to make sure that there are no spaces in the blog post itself. Click on a blog post with multiple images, click HTML tab and check for spaces between them. Notice below that there is no space between the closing of one a tag and the opening of the next ..</a><a href... . Also look for line breaks <br /> or <br>. The code for two images in your blog post should look something like this (depending on image host – blogger default may look different).

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

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 {

remove the space between images in blogger

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

Remove spaces between images – The Script

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" language="&lt;span class=&quot;hiddenSpellError&quot; pre=&quot;&quot;&gt;javascript&lt;/span&gt;">// <![CDATA[
<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>

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

Why I don’t recommend using Bloggers default image upload

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>

How to upload using Photobucket, Tinypic, 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.

uploading images with blogger

If you want to use Blogger Image Upload

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.

Any problems, let me know below

I hope this helped you out, I know that this is a very popular question and because of the varying templates, it can be hard to solve if you don’t really know what you’re looking for. If you have any questions at all, leave them below along with your blogs URL and I will try to help. Of course, it is easier to fix when I can see your code directly so if we can’t seem to fix it I will suggest adding me as a blog admin temporarily. This will allow me access to your HTML in order to fix the problem.

Align images vertically + Add multiple images side by side

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

Script Source

Comments

  1. says

    Hi, Thanks for the excellent post… I have followed your advice as best I could but I can’t seem to get the gap as small as you have it in your before and after image. Could you please have a look at my code and see if I’ve missed something?
    I’m also wondering if I put the script in the right place as I think there is more than one ‘head’ tag.
    thanks in advance!

  2. says

    Hello! So glad to have found your site via Google! :) I’ve been super frustrated about the white spaces on my images, and I’ve tried your solutions but nothing seems to work :( Any ideas why? :(

Leave a Reply

Your email address will not be published. Required fields are marked *

IMPORTANT! If adding HTML or code to the comments please first paste it into the box here or here and press encode. Paste the output into the comment box above in between <code> and </code> otherwise I will not be able to see it. Thank you!