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

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.

Post last updated:

88 responses to “Remove spaces between images in blogger”

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

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

    1. Awh no problem ๐Ÿ™‚ glad it worked for you x

  3. You are an amazing genius. This was beyond helpful. THANK YOU!!

    xxoo,
    Mary
    The Classy Cubicle

    1. Awh thank you, very happy to help ๐Ÿ™‚ x

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

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

    2. … 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.

  5. 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?

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

  6. i read so thoroughly and unfortunately still could not fix the problem

    1. 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 ๐Ÿ™‚

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

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

      1. Ok yeah I’ve got that far! Whats next? ๐Ÿ™‚ x

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

          1. 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[ //

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

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

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

    2. 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>
      1. 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

        1. No problem lovely ๐Ÿ™‚ tomorrows tutorial will show you how to add custom fonts to your blog x

  9. chandra

    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!

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

  10. sarah

    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

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

      1. sarah

        It worked thank you so much for all your help lovely! xoo

  11. luis

    Hello Ellie. You may be able to help me with an issue.
    https://blogger-a-googleproductforums-com.googlegroups.com/attach/d4f90a35f076a131/example.PNG?view=1&part=2

    See the right part of the picture? Doesnt fit. Also happens when I use smaller images in the same row. I tried with a new blog from zero and the same happens.. Im using simple template without sidebars and the width of the entire blog is 960px

    Thank you

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

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

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

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

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

      1. Thank you very much! You’re amazing x

  14. Amazing tutorial! Thank you!

  15. I love your blog, but I have a problem – this tutorial works on my images side by side but not on the bottom! I tried everything you say! thanks for your help!

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

      1. 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
        :/

        1. When you paste the image code into the text box, do you switch tab (compose/html), alter them or align them using Blogger?

          1. 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!)

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

  16. Sarah

    hey ellie, when i upload image from flickr, the image doesnt show in my popular posts widget? Am i doing something wrong?!

    1. Hey Sarah, it’s showing the images now so I presume you figured it out? x

  17. hi i have a problem i cant remove the space and i try what do you
    sorry my english is bad

    1. 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 ๐Ÿ™‚

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

    1. 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 ๐Ÿ™‚

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

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

      1. Hi where i can find the script? Thanks for the thing it worked the space is less than before.

        1. The script is in the tutorial above under the heading “remove spaces between images โ€“ the script” here

          1. hello!sorry again i looked head but i didnt find it where i can find it?

          2. Check out this post for help on how to find code in bloggers HTML editor http://xomisse.com/blog/search-find-code-bloggers-new-html-editor/

          3. Hi. I find head but when i install the script it didnt work nothing change do you think that the problem comes from my template?

          4. The script won’t appear to do anything, but it will help with the formatting of your posts to help prevent unnecessary code that’s been added as you edit/write. It’s not so much a problem with your template in particular, it’s how Bloggers default image uploader works which is why I recommend using an external image hosting site. Add a {margin-bottom: 0px !important;} to Template > Edit HTML above ]]> </b:skin> that should solve the final part of the issue.

  20. I added code to my html about the and it took away the space between pictures, yay! but . . . my slideshow now does not work, any idea why?

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

  21. I have tried everything and can’t seem to get it to work on my new blog. It worked on my blog blog though.

    1. Hello! Your url is private, add ****@gmail.com as a reader and I can take a look for you ๐Ÿ™‚

  22. Woman, I love you. THANK YOU SO MUCH! ๐Ÿ˜€

    1. Awh thank you ๐Ÿ™‚

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

    1. 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 ๐Ÿ™‚

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

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

          1. You’re a genius! that did it. Thank you so much for your help!
            kx

          2. No problem, happy to help ๐Ÿ™‚ x

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

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

  24. 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? ๐Ÿ™

    1. Your images are larger than the content area, you’ll need to fix that firstly and then add a { margin-left: 0px; margin-right: 0px;} to your CSS.

      1. Oh, didn’t realized the photos bigger than the content area d’oh ๐Ÿ˜ฎ Changed it already, thank you! However, where exactly should I put the code? Anywhere? ๐Ÿ˜€ Sorry for another question!

        1. In Template > Edit HTML > above ]]> </b:skin>

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

    1. Awh thank you so much ๐Ÿ™‚ I’ll be back with my regular posting schedule after this week!

  26. Ashley Nudge

    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

    1. It’s likely to be excess code in the post itself, take a look at step 1 again.

  27. Aw this didn’t work for me not great at this stuff ๐Ÿ˜› thanks though lovely blog!

    1. Hello, you still have a padding value of 8px on .post-body img

  28. Judy Freilicher

    You are absolutely amazing! I can’t tell you how many times I’ve come to your blog for answers to technical questions and have found the answer that eluded me elsewhere. I had set up a very complex table (6 rows, 6 columns) to display a picture that has some animated elements, and all the little pieces had to sit tight against each other, but gaps were opening between all the table cells. This problem was driving me bonkers for days and after trying every other suggestion I could find, I finally found the answer here. Thank you, thank you, thank you for taking the time to do these tutorials, they’re worth their weight in gold!!!

    1. Hello Judy, thank you so much!! I’m so glad you find my tutorials helpful and I really appreciate you taking the time out to leave me such a lovely comment. Hope you’re having a nice weekend ๐Ÿ™‚

  29. Hi,

    If I add the code above , and make sure there are no spaces in the post editor, they are not quite lined up. How do I fix this?
    (Example: http://othermix.blogspot.nl/2015/01/naturalis-bones-seduction-and-cool-dna.html)

    1. Hello, you can set the position when adding images to the post.

  30. Thank you so much for this! ๐Ÿ™‚

  31. Your blog tips are awesome!!! Thank you so much. =)

  32. Thank you so much for your help! ๐Ÿ™‚

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up youโ€™ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.