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.

Important

Create a backup of your template before editing - how to download / restore template. Not sure how and where to edit? Check out this post explaining the HTML Editor on Blogger before starting.

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 {

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

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

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.

uploading images with blogger

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

    Hey there,
    Your blog is great – it’s so helpful, i’ve also checked our your personal style blog which i enjoy too.
    I’m wanting to create a sticky navigation bar, that sits at the top of my page, and also remove the boarders that divide my pages tabs.
    I was wondering if you already have a tutorial posted on how to do so, i’ve looked but haven’t had any luck?
    Thanks so much in advance!
    Samantha
    novellaplace.com
    x

    • says

      Hello lovely, thanks so much. I do have a tutorial on both of those things on my old design blog, I will be updating them and posting them here shortly. I’ll try do it today for you. Love your outfits, such great style, following you :) x

  2. says

    Thanks for these tips, this is something I’ve always been wondering about but never tried messing with my HTML to fix…Thankfully I didn’t have to mess around, I just did exactly what you said and got it! So helpfull!

  3. says

    Hello! The space between my images have been bugging me.
    I’ve tried changing padding to 0px and adding the script, it still doesn’t work. My images are uploaded on TinyPic or Photobucket.

    • says

      Hi lovely, fabulous blog. The spaces look okay to me, but I notice a break space in your blog post which is causing that remaining little gap. If you go into your Sewing Crochet Knit post and click the HTML section, you’ll see a <br /> which is kind of like hitting “enter” when typing. Remove this and make sure in future to add photos one after another without spaces so that this code won’t be entered. Hope that helps :) x

    • says

      … it may also look like <br>. Adding margin-bottom: -4px; under .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img will also help but then you may need to add a space between your images and text while writing. Typically a little gap is added to space images out, but that’s a way to remove the space altogether.

  4. says

    On the preview, the spacing is perfect but when I post my blog it has the spacing that I dislike. So on my last post, house sitting, I had it perfect and then I went back to edit the html and I cannot figure out how to remove the spacing between the pictures. Can you please help me? I do not have in my html. What do you suggest?

    • says

      Hello lovely, I’ve noticed a couple of things. Obviously I don’t have full access to your HTML so this is just what I can see. Firstly, some of your images that you’ve put side by side in your latest post are different sizes so this will affect positioning and spacing in that blog post.

      You appear to be using Blogger to host your images, you need to upload your images to an external hosting service such as Photobucket and use the code from there.

      I also noticed that that you still have a padding of 5px, which needs to be changed to 0px in the main HTML section. This is what that looks like .post-body img, .post-body .tr-caption-container { padding: 5px; }

      Also it looks like you’re using tables for your images? If so, find /b:skin and above it add the following; td, tr, table, tbody { padding: 0px; margin: 0px; border-spacing: 0px; }

    • says

      Hi lovely. You appear to have a lot of <br> or <br /> in your posts HTML, as well as the use of tables and extra code which comes from using Bloggers default image hosting. My suggestions would be to use Photobucket for hosting your images and adding them one after another by pasting the code from Photobucket without altering them. This will hugely help the coding in your post HTML.

      As for your main HTML, find /b:skin and add the following above it td, tr, table, tbody { padding: 0px; margin: 0px; border-spacing: 0px; }. It also looks like you still have padding on images so find .post-body img, .post-body .tr-caption-container { padding: 5px; } and change the 5 to 0.

      Let me know how you get on with this :)

  5. says

    Hi!

    I tried to find these

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

    Originally posted on http://xomisse.com/tutorial-remove-spaces-between-images-in-blogger/

    in my template HTML and couldn’t find any of them and I then went on to the bit below in your post about adding the big script about and that didn’t work either.
    I’m not overly good with the HTML stuff so maybe you could write me a HTML for dummies explanation haha!

    Laura x

    • says

      lol of course :)

      Go to Template > Edit HTML. On line 13/14 you will see b:skin with a little black arrow on the left hand side by the number. If you click the arrow, it will expand your CSS (this is the code that styles your blog). Check out this post (http://xomisse.com/understanding-css-in-blogger/) if you’re having any problems with finding it or anything.

      After expanding b:skin, scroll down until you see Posts. It will probably look like this

      /* Posts
      ———————————————– */

      after this, you should be able to see some code with .post img in it, like

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

      and

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

      Then change the padding for each of these sections to 0px, like shown above. If you want to let me know when you get this far and I’ll talk you through the rest then :) xx

        • says

          Perfect. See you are good at this! Look at that code for any of the following

          border
          border-top
          border-bottom
          padding
          padding-top
          padding-bottom
          margin
          margin-top
          margin-bottom

          if you find them for any of the .post img codes you found above, change the number to 0px too. Then we can add the script. So again, look for /head which you’ll see somewhere under /b:skin.

          After /b:skin and just right above /head add the script shown above.

          • says

            I can’t seem to find where the bit is, the only one I can find looks like this.

            #layout .region-inner {
            min-width: 0;
            width: auto;
            }
            ]]>


            // <![CDATA[ //

            • says

              Sorry your comment went into the spam folder. Its going to be way down passed that, perhaps around line 800-900. Click into the HTML box and hit CTRL F (for PC) or CMD F (for Mac) and a little white search box will appear. Type /head in here and hit enter, this should bring you to the correct code.

              Check out this image, it will show you my example.. On line 902 you’ll see the code.

  6. says

    Im so sorry to be a pain, this is going on forever haha. The /head is on like 545 but when I put the script in on the line above nothing happens

    • says

      It is fine, I am just happy to help sweetie. The script won’t show anything happening initially, it’s there to adjust certain code. In your latest post about the chocolate brownies (yum bdw) there are spaces between the images. Click Edit Post. You will see two tabs
      – Compose
      – HTML

      Click the HTML. You will see the code for your post. In this you will see image code which looks like this

      <img alt=" " border="0" height=" " src=" " title=" " width=" ">

      between these images, you may see other code and break spaces (<br> or <br />). If you remove this excess code, the script and code that you’ve added to get rid of padding will work.

      As explained above, this is caused by using Blogger images and adjusting the images after inserting them into the post. My advice is to

      a) If you are using Blogger images, insert them one after another and DO NOT touch them or alter them once inserted. Doing this will prevent added code.

      b) *Recommended* Upload your images to an external hosting such as Photobucket and copy the image code over into a blog post, one after another. This will prevent break spaces (this is like hitting “Enter” and going to a new line) or excess code.

    • says

      I cleaned up your image code for that post and removed the excess code, breakspaces and gaps. This is what you want your image code to basically look like. Removing just the breakspaces should give you a better result on the majority of your posts.

      <a href="http://4.bp.blogspot.com/-F5Ee93BcO3M/Ub3q2glgYVI/AAAAAAAABEU/vQ8jkEgw-h8/s640/DSC_1097.JPG"><img alt="100 Calories Chocolate Brownies" border="0" height="426" src="http://4.bp.blogspot.com/-F5Ee93BcO3M/Ub3q2glgYVI/AAAAAAAABEU/vQ8jkEgw-h8/s640/DSC_1097.JPG" title="100 Calories Chocolate Brownies" width="640" /></a><a href=""><img alt="100 Calories Chocolate Brownies" border="0" height="426" src="http://2.bp.blogspot.com/-3kmbm2OB5SE/Ub3q2yYztuI/AAAAAAAABEY/78RolTrAlds/s640/DSC_1098.JPG" title="100 Calories Chocolate Brownies" width="640" /></a>
      • says

        Woohoo its done! Thank you really appreciate it finally did it! I mentioned on your other post about getting the side font on my sidebar as my post title font, how would i do that if the fonts not on the list? x

  7. chandra says

    thanks for sharing this! i upload my photos via photobucket and when i’m in “compose” mode, there is no white space between the photos. however when i go to publish the post to my blog, the white space appears. any suggestions?

    thanks!

    • says

      In compose mode, you should only add the code for the image. By going from Edit HTML to Compose or by adding the photo via the image uploader or editing the photo, extra code will be added. I’ve had a look at your code and there are <br> between the images, this is causing some space. You also have padding, margins and borders that aren’t set to 0px under .post-body img. Thats what is adding the gaps. Please have another look at the tutorial, following each step :) x

  8. says

    I have tried this step by step! and I dont know what I’m doing wrong i changed everything under .post to 0px and when i click preview template it still remains the same. I tried it with both images from flickr and images i just uploaded using blogger…. I didn’t save the changes in the end as when i previewed it, it was still the same. Any advice? xx

    • says

      Hello, you changed everything under .post-body img not .post, just want to make sure you’re editing the correct section? You do need to save it for the script and some other code to take effect. There may still be a tiny gap, which is normal and in design terms should be kept, but if you wish to remove this also, you can add margin-bottom: -5px; to post-img. Hope this helps x

    • says

      Hello! It’s more than likely a padding issue with the images, some of the code above should help. Can’t be much more help without your URL to see if there’s a specific problem.

  9. says

    I followed your beautifully organized directions exactly but there is still a small space between the photos. I was able to reduce the space by setting the padding to 0px but I cannot get the photos flush against each other. I tried uploading via Photobucket and the same small space is showing. Please refer to my most recent post as the older ones were not formatted in the same way.

    p.s. Your Blog is amazing… like a cool drink in the Sahara

    • says

      Hello Chloe, thank you very much! I’m so glad you like it. If you go in to edit your latest post and click the HTML tab instead of compose you will see a break-space in between your images. This is displayed as <br>. This is whats causing that extra space in the latest post you published. As for the other posts, the tiny gap left is encouraged but if you do want to remove it you can use the following code

      post-img { margin-bottom: -5px; }

      please note that this may conflict with the formatting of the post body items such as captions.

  10. says

    Hello Ellie, your blog is absolutely amazing! (I’ve been scrolling around for ages after Google directed me to this page!)

    I’ve been trying to remove the white spaces between the images on my posts, and I’ve tried all the methods listed here, but they don’t seem to work? It shows up fine when I’m still in Blogger Editor, but when I publish, there’s white spaces everywhere!!

    Here’s my latest post, so you can see what I mean: http://susan-abroad.blogspot.co.uk/2013/10/memories-of-kyiv-ukraine-part-1.html

    • says

      Hello. There’s two problems, one is that theres still padding attached to the images. Find .post-body img, .post-body .tr-caption-container and .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img in Template > Edit HTML. Change the padding value under both to 0px. The other thing is that you’re using Pin It Hover Over on your images, this is done by using divs which could possibly cause extra space that the above methods won’t remove. I’m currently researching a way around this. Hope this helps

    • says

      Hello! Thank you, glad you like it. You seem to have divs wrapped around each photo, you need to remove those and having only the code for images place one after another without any access code. Select a post, click edit and HTML tab – you’ll see the div code in between your images. Try removing that, you may need to double check that your padding is set to 0px again afterwards.

      • says

        oh yes, you’re right but the thing is, the “divs” only appear after, I don’t know why. because when I create a new post, I put the image links and they don’t come with the divs
        :/

          • says

            Oh yes, I normally do the post with the tab “compose” and not “html”. And now I tried do write one in the htlm tab and the divs don’t appear anymore, but the space in the bottom stays the same.
            And about the padding initially I put them with 2px and the margin as well, because I don’t want the images be too tied, and now when I tried to put the padding with 0px the images side by side are completely without space and the image on the bottom still have space, a little bit less but stil have. Doesn’t it suppose to be equal? (And really really sorry for my bad english!)

            • says

              If you put the padding at 0px, there will still be a little bit of space to separate the images horizontally, but images that are side by side will appear together unless you add a space. Also remember to add the image code one after another and not to position it using Blogger, this will re-create the space.

    • says

      Hello, you still have padding values under .post-body img, .post-body .tr-caption-container and .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img. Follow each step above :)

  11. says

    Hi Ellie!

    I am trying to remove some huge gaps between images that developed after I added a custom hover button for Pinterest. I have followed your tutorial to no avail. Any suggestions? I would really only like the padding to be about 10px, right now it seems closer to 40px.

    Thanks!

    • says

      Hello Katie. The reason is that the pin it button is actually being added between your images and then positioned to look like it is on top of your image, hence the big gap. Unless you remove the button there’s not much you can do. I do have a tutorial for adding a hover over pin it buttons here that adds it to your image, not underneath it. Also, if you go into the post editor and click HTML instead of compose mode, in between the images you’ll see a <br> which adds space (it’s like hitting enter on the keyboard) make sure when adding images you add them one after another to avoid this extra space. Hope this helps :)

  12. says

    Hello. I tried everything and it didnt work. Look the html and tell me what is wrong. I dont understand about the margin. Sorry for inconvenience. Hope your reply

    • says

      Hello. You still have padding value under .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img
      , to remove it change padding: $(image.border.small.size); to padding: 0px; and change border: 1px solid $(image.border.color); to border: 0px solid $(image.border.color);. Under .post-body img, .post-body .tr-caption-container change padding: $(image.border.large.size); to padding: 0px;. You’ll also need to instal the script in order to remove default Blogger margins that aren’t in your Template. To remove shadows on your image, change the box-shadow values to 0 also.

    • says

      The script for the slideshow is probably conflicting with the script used above. You could re-do the tutorial but skip the script part and just alter the padding, borders and shadows which will minimise the space. Keep in mind that your original images have a white border around them anyways so when two are together both borders will look like a space.

  13. 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!

    • says

      Hello, yes there’s an opening tag <head> and a closing tag </head> so make sure it’s above the closing one. The remaining space is cause by a margin value that the script should remove :)

      • says

        Thank you, I have done as you’ve said and followed exactly what you said about replacing everything to 0 px but it’s still not working. Any ideas would be really welcome!

        • says

          Okay, I have another little thing for you to try. Find ]]> </b:skin> in Template > Edit HTML and add a { margin-bottom: 0px !important; } above it.

              • says

                Hi, I’ve been using my site with the reduced gaps between for a while now and I’m having some problems with the way the words integrate with the photos. Most of the time no matter how many breaks I enter after a photo or how many times I press spacebar the words always end up very close to the photo but I want there to be a small gap. Sometimes I even resort to putting an empty caption box around them to force them apart. The problem persists whether the writing is above or below the photo. can you please advise? thanks in advance katx

                • says

                  Hello, firstly check the spacing settings in Blogger. Go to a new post, click options on the right and under Line breaks make sure “Press enter for line breaks” is checked. You could wrap your text in paragraph tags (<p> Text here </p>) to tell the broswer that is is text and it will automatically be given extra space.

  14. 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? :(

  15. says

    Woman you are a godsend! I’ve gone though all of your tutorials and it’s just made my blog so much cleaner. Thankyou, thankyou, thankyou. Please keep updating and writing more tutorials as I will definitely be reading all of them.

  16. says

    Ellie!

    I just commented on another post a little while ago, but remembered an issue I’m having in regards to this topic and figured I’d ask you about it as well! Your tutorials are so helpful! I used this one to shrink the width between my images, but still continue to have a random problem. If you’ll look at some of my “My Looks” posts under ‘Fashion’ (or any other kind of post most likely), you’ll notice that some of my images have a larger space between them than the rest. WHY IS THIS HAPPENING?! I can’t seem to fix it! :(

    Thanks again!

    xo, Ashley

COMMENTS ARE NOW CLOSED FOR THIS POST, TWEET ME YOUR RESPONSE



If you are interested in custom design or coding work
please contact me here for a quote.