Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #27579
    Mark S Richards

    I am placing a border around my images using the Advanced Tools option.  In Edit view it appears that the border is tight around the image.  The published view, however, shows a noticeable gap between the image the the bottom border.

    Joseph W

    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.

    Mark S Richards
    Guest  to view this issue

    Joseph W

    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!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Borders around images leave a gap’ is closed to new replies.