Image Block: remove padding?

I have a nagging question that's driving me up the wall..

As you may know, adding an image in the blog using the image block (specifically) introduces padding around the image (around 10~15px?). While this isn't usually a problem, I'd like to remove (or better yet, customize) the space between, so that the images touch each other on all sides (like a photo wall). Is there a way to do this using the custom CSS function? It would seem like a fairly easy parameter to change. Any help would be greatly appreciated!

p.s. Adding multiple images really is a pain on SS6 without using the gallery block, as it turns out.. It'd be nice if you could upload multiple images at once as individual image blocks. That would make posting lots of images much more manageable. Oh well..

Yes, custom CSS would probably be your best bet, try something like this, add it to the Custom CSS Editor:

.sqs-block.image-block {
 padding: 0;
}

If you want to customise the padding, you would add extra pixel values to suit your need, this for example:

.sqs-block.image-block {
 padding: 5px 10px 15px 0px;
}

Padding is a CSS shorthand, where one or more values can be controlled:

1. padding-top: 5px
2. padding-right: 10px
3. padding-bottom: 15px
4. padding-left: 0px (zero values can also simply be written as 0)

Thank you so much! I've been scouring the forums for an answer, but this works perfectly ;D

How would one do the same thing for a gallery of images?

How could I target a specific image to change the padding only on this image?

The above CSS will most likely (in my experience) only control the left and right padding on the image. You need to add the !important declaration in order to override the top and bottom padding from Squarespace.

This worked for me:

.sqs-block.image-block {
 padding: 0px !important;
}

Does this work on a gallery block as well if you substitute “image-block” with “gallery-block” in the CSS?

I’ve searched for this answer everywhere! THANK YOU!

I tried the code provided by Kyle and it worked only on my Home page, but not on other pages where I really need it, such as this page.

I am using the Adirondack template.

I also want to decrease the padding between my header navigation menu and the slideshow on my home page. You can see how much space there is between the menu and the slideshow in this screenshot:

Any ideas for both issues? Thanks.

It worked but it indented my blog titles and text as well.

Image: https://dl.dropboxusercontent.com/u/112694530/Screen%20Shot%202015-01-20%20at%206.04.16%20pm.png

Any solution to that?

I am having the same issues with my templates. I’ve tried Shift, Flatiron & Galapagos, they all have the same padding around image or gallery blocks. I’ve tried to input the code in the Custom CSS area and in the page setting and nothing changes. What am I doing wrong?

This is what my website looks like www.johansalvador.com. Notice that after you scroll pass the first banner image there is a gallery, with lots of white space around it. I would like to reduce that space and flush the images, which are inside a masonry summary wall, against the width of the page.

I’ve used this code:

.sqs-block.image-block {
 padding-top:0px !important; padding-bottom:0px !important; padding-left:0px; padding-right:0px;
}

And this code:

.summary-thumbnail {
 margin-top: -30px;
}

And this code:

#page {
 padding: 0 !important;
 max-width: 100% !important;
}
.sqs-block.image-block {
 padding: 0
}

And this code:

<style>
#page {
 padding: 0 !important;
 max-width: 100% !important;
}
.sqs-block.image-block {
 padding-top: 0
}
</style>

That last code gives me a syntax error when I use the STYLE tag.

I’ve tried them all on all 3 templates and I get nothing!

Where do I go from here?

This actually didn't work for the left-right padding on my images; but it worked for my top-bottom padding. Can anyone advise? I've included a screenshot here:

http://www.parceldesign.com/wp-content/uploads/2016/01/Screen-Shot-2016-01-20-at-2.33.26-PM.png

@vicnell Please make sure that you are only adding answers to posts when you have an answer to provide. Otherwise, you will want to add your response as a comment.

I've removed the padding, but there was still a line between the images, it was the margin. This code did the trick:

<style>
 .sqs-gallery-block-stacked .image-wrapper {
 margin:0 0 0 0;
 }
</style>

Just add it to the Page Header Code Injection section in the Advanced Page Settings.

I had problems with the padding at the bottom and tried adding different code in the CSS without any success.

I used Gallery image with 1 picture and it removed the padding that was causing me FRUSTRATIONS.