How can I remove the padding around images?

To override some core CSS, you may need to add !important to certain elements. The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document,that is — considering it’s the correct element

Caution:
If you’re wanting to adjust .sqs-block.image-block in your custom CSS, you’re going to effect everything on the site using the same style, which in this case would be any image block you insert.

… but if you want to play, try this:

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

If that doesn’t work, it could be because they are linked elements, so try:

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

Maybe an easier thing to do on the site — to add social network icons would be to use the built-in social blocks, which you can configure here: Using the Social Links Block

Also see: Connecting Social Accounts

Using the social network icons that are provided by squarespace was an easy fix. Thanks!

You could also try this:

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

I was able to solve my bottom image problem by just adding it to the footer. it was a work around but it will do.

I was able to solve my bottom image problem by just adding it to the footer. it was a work around but it will do.

Did you find a solution for the padding? I would like to have the same for the links section at www.franktschoepe.com

I don’t want any padding betweeen the 3 pictures.

this worked a treat on marquee template! thanks!

having trouble getting this done. Can anyone please provide some assistance. thank you.

having trouble getting this done. Can anyone please provide some assistance. thank you.

Thanks this worked perfectly on the Flatiron Theme. I didn't need the left / right paddings so I just deleted those.

Thanks this worked perfectly on the Flatiron Theme. I didn't need the left / right paddings so I just deleted those.

Thanks this worked perfectly on the Flatiron Theme. I didn't need the left / right paddings so I just deleted those.

Thanks this worked perfectly on the Flatiron Theme. I didn't need the left / right paddings so I just deleted those.

Honestly, this is the solution I like best for my site, but I have Image Blocks and Text Blocks offset from one another:

 .sqs-block.image-block {
margin-top: -8px;
margin-bottom: -8px;
  padding: 0;
}

This allows my Image Block corners to touch when they're in different rows, without overlapping any of the content (see screenshot).

I've tried many different codes and I can't seem to get the padding off from the top and bottom. Here's one of the codes and a screenshot (they're all essentially the same it seems). I'd like to achieve a photo wall with no padding between images.

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

On 9/22/2020 at 2:26 AM, DylanSG said:

I've tried many different codes and I can't seem to get the padding off from the top and bottom. Here's one of the codes and a screenshot (they're all essentially the same it seems). I'd like to achieve a photo wall with no padding between images.

 

 .sqs-block.image-block {
margin-top: 0px !important;
margin-bottom: 0px !important;
  padding: 0;

Can you share link to page in screenshot? We can help easier.