3 min read(Last Updated On: December 31, 2017)

Hey, it’s Hoz here with a quick hack for you. Although this is part of the Beaver Builder CSS Snippets series.

In this hack, we’re going to adjust the spacing under the image caption box.

Now, to be clear, this is not a Beaver Builder issue. It’s simply a styling matter and it can affect any WordPress theme. So you don’t have to be using Beaver Builder as your theme to benefit from this piece of code.

In fact, this tutorial could also be called how to add spacing under image caption in WordPress, but since I recommend Beaver Builder if you want to make your WordPress website faster, let’s roll with that.

So here’s how this came about: when I was first setting up my blog, I was playing around with styling to get things ‘just right’.

I got to a point where, after applying some global styling, I had the fonts behaving like I wanted them to. Mostly, I wanted to get the spacing between text blocks looking good.

But the styling I had applied didn’t affect the image caption box. In my case, the gap between the bottom of the caption box around the image and the start of the next line of text was too short.

I’ve recreated this in my text blog so I could show you what this looked like – here you go:

Spacing Under Image Caption
Example of spacing under image caption too short

The arrow shows the gap between the border of the image caption box and the top of the paragraph. It’s a little on the short side, no?

So let’s dig into the out Beaver Builder CSS snippets toolbox and fix this by increasing the unsightly gap.

Adjusting The Gap Below the Image Caption Box, from The Beaver Builder CSS Snippets Series

Here’s the code:

.fl-post-content .wp-caption {
margin-bottom: 30px;

And here’s how we apply it, step by step:

  • inside your WordPress dashboard, click on Appearances
  • then click on Themes
  • then click on the Beaver Builder child theme customize button
beaver builder theme customize
Beaver Builder theme customize button

Now, find the Additional CSS section in your beaver builder customization menu.

beaver builder additional css
beaver builder additional CSS

Now, paste the snippet of CSS code into the white text area.

Spacing under image caption CSS
Spacing under image caption CSS

Note: in my case, I opted to implement 30px as my spacing, as you can see in my example. Naturally, you can adjust your spacing to please your own eyeballs.

Now, let’s finish this (for the newbies out there):

  • save
  • go back to the page where you have an image with a caption
  • refresh the page
  • watch the magic
Spacing Under Image Caption CSS Fix
Spacing under image caption CSS fix

And there you have it: a far more pleasant and visually appealing presentation. Yay!

Using Page Builders enables you to work smarter, faster and error-free. It just makes good sense.Click To Tweet

Disclaimer: the Beaver Builder CSS Snippets series is not affiliated in any with the lovely people that make Beaver Builder. It’s a name I invented using the name of a theme and words that already existed in order to help out anybody looking for this fix (sometimes you have to mention stuff like this for the silly idiots out there).

I hope this tutorial brought immense pleasure to you. Stick around and catch more cool hacks. But before you go, let me give you some awesome resources.


This was a Hoz tutorial featured on the Youtube Channel. Make sure you CLICK TO SUBSCRIBE to catch all the video updates!

Please Share This Content
Hey, I would really appreciate it if you share this content with your friends and followers :)?