Borders around images leave a gap

Hi Mark,

Image elements that are added to content areas with the Post and Page Builder are wrapped in <p> tags and the custom styles added with the Advanced controls are applied to those tags instead of the actual image itself.

The theme used on your website might have its own custom rules that is adding margins to the image or is changing the line height of the <p> tags surrounding that image.

Do you have a link where we can see the bordered image with the additional gap at the bottom? Once we get a look at it we should be able to confirm if this is the case and come up with a solution.

Thank you for sending us that link Mark!

The gap between the border and your images looks to be coming from a margin-bottom rule that is added to image using the aligncenter class by your theme, BlogGrid, and is pushing the border on the bottom of the <p> element away from the image. Your theme should have a Custom/Additional CSS area available in the Customizer and you can enter the following snippet there to remove that gap between the borders and images:

p img.aligncenter {
    margin-bottom: 0px;
}

Hopefully that code helps you get your image border working as expected and please let us know if there is anything else that we can do to help!