Added an image border, now I have odd spacing

I used the following code to add a border around an image: #block-yui_3_17_2_1_1691679759960_14887
{border: solid 25px #A55A04 !important;
}

I got the border, but I also got some odd spacing and offset when I view the site in the code editor and in the browser: 

I also tried padding: o and margin: 0 to no avail. When I go to the section editor, the spacing appears to have shifted and there's an offset:

The screen shots are redacted. 

Thanks for any help you can provide!

I would need to see and inspect the website to be able to identify the cause of this padding. Can you share that?

8 minutes ago, Ziggy said:

I would need to see and inspect the website to be able to identify the cause of this padding. Can you share that?

https://www.pgdesign-ux.com/us-bank-reg-opt

I guess I didn't need to redact the screen shots. 

Things generally look quite different from the editor to browsers. Text size is much larger than it appears in the editor, images move, it's been an issue since the update to fluid. 

4 hours ago, Ziggy said:

I would need to see and inspect the website to be able to identify the cause of this padding. Can you share that?

Hi Ziggy, any luck? Thanks.

Try the following.

#block-yui_3_17_2_1_1691679759960_14887 img {

  --size : 25px;
  
  border : var( --size ) solid #A55A04;
  height : calc( 100% - ( var( --size ) * 2 ) );
  width : calc( 100% - ( var( --size ) * 3 ) );
  
  }

Adding borders to elements can be tricky depending on how they are encapsulated by other elements. I have found that in general you want to get the border on the element itself, in this case the image, or as close to up the hierarchy as possible. I have not always been successful getting a border where wanted without spacing issues.

Also putting a border on something, again depending on circumstances doesn't automatically adjust everything around it. In many cases you have to account for the space taken up by the border and make adjustments to other elements to accommodate the new border.

Let us know how it goes.

10 hours ago, creedon said:

Try the following.

#block-yui_3_17_2_1_1691679759960_14887 img {

  --size : 25px;
  
  border : var( --size ) solid #A55A04;
  height : calc( 100% - ( var( --size ) * 2 ) );
  width : calc( 100% - ( var( --size ) * 3 ) );
  
  }

Adding borders to elements can be tricky depending on how they are encapsulated by other elements. I have found that in general you want to get the border on the element itself, in this case the image, or as close to up the hierarchy as possible. I have not always been successful getting a border where wanted without spacing issues.

Also putting a border on something, again depending on circumstances doesn't automatically adjust everything around it. In many cases you have to account for the space taken up by the border and make adjustments to other elements to accommodate the new border.

Let us know how it goes.

No luck, but thanks for trying. I'm going to have to abandon the effort. It's frustrating that something so simple is made so difficult by SS. Thanks again, Creedon.

5 hours ago, PattiGDan said:

No luck, but thanks for trying.

This is what I see.