Last Paragraph Bottom Margin

Get rid of your last paragraph's bottom margin.

By default, all of your paragraphs have some bottom margin. This is to ensure that two paragraphs don’t butt up right next to each other, like this:

Two paragraphs of text without any line space between the two paragraphs.

That’s great — we need that.

Except in some cases where it becomes a little awkward…

Let’s say, for example, you have a card design with a headline and some text. The card is on a contrasting background color separating it from the background. All around the card you have 24px of padding.

Except for at the bottom.

At the bottom you have 24px of padding plus the bottom margin from your paragraph, making that gap bigger than the other sides of the card.

Here’s an example:

A screenshot of a card design with annotations showing the padding on all sides. The bottom side has a larger padding value (48px).

3 sides of the card (left, top, right) all have 24px, just like we wanted, but the bottom of the card ends up with 48px of padding — why is that?

The bottom of the card has the same 24px of padding, but it’s getting another 24px from the bottom margin of the last paragraph.

This results in an uneven amount of padding around your card.

To solve this, you could (of course) simply go into the settings and manually remove the bottom margin from your last paragraph, or reduce the card’s padding-bottom to compensate — but both of these options are manual actions, and if you ever add another paragraph you’ll have to go back and fiddle with it all again.

So how do we fix it?

There are a number of ways to tackle this (including the lobotomized owl technique shown here by Kevin Geary), but I’ve come up with a pretty simple setup that works for me in about 98% of cases.

It requires just a little bit of setup, but afterwards, it’s all handled automatically for you. Sounds good, right?

So, lets dive in…

The CSS for this is pretty simple:

/* Remove bottom margin on last paragraph in container (front end) */

.gb-container p:last-child:last-of-type {
	margin-bottom: 0px;
}

With this rule, we’re saying:

When there’s a paragraph that’s inside of a GenerateBlocks container, and it’s the last child of the container and the last paragraph, then set the bottom margin to 0.

When applied to the same card from before, we get even spacing all around the card:

A screenshot of the same card shown previously, but with even padding around all sides.

Problem solved, right?

Well… Kind of.

Unfortunately, putting this CSS in your Customizer > Additional CSS or in your child theme only effects the front-end of the site. So while it looks great on the front end, you’re still going to see the extra space caused by the paragraph’s bottom margin while you’re in the edtior.

You may be able to live with that quirk — but we can fix that too.

How you go about fixing this depends on whether or not you use a child theme. There’s a solution for both a child theme and a non-child theme site, so I’ll explain how to fix it either way.

Using a Child Theme

If you’re using a child theme, this solution is pretty simple and totally free.

We need to enqueue your child theme’s stylesheet into the editor. This can be done with the following PHP snippet (which you can drop in your child theme’s functions.php file):

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/editor.css", false,'1.0', 'all' );
} );

With this snippet, the editor will load the styles from your child theme stylesheet in the back end editor.

However, there are some challenges with specificity. Some CSS rules might not be specific enough to override the editor’s stylesheet — and the CSS rule I shared with you in this article to remove the bottom margin is one.

In the editor, your last paragraph is never the :last-child, because the editor injects a button for you to be able to add another block, which becomes the last child.

So, in order to have this rule take effect in the editor, we need to add a second CSS rule:

/* Remove bottom margin on last paragraph in container (editor) */

.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
	margin-bottom: 0px;
}

What this rule does is looks for the second-to-last paragraph and removes the bottom margin. This way it skips over the controls for adding a new block and targets your last paragraph.

With these two CSS rules in place, along with the PHP to enqueue your stylesheet in the editor, things should be looking the same on the front-end and back-end — with your last paragraph’s bottom margin set to 0, giving you even padding all around your card.

Without a Child Theme

If you don’t use a child theme, then the only solution I know is with Code Snippets Pro, which will allow you to do all of this with individual snippets.

CSS Snippet #1

First, make a new CSS snippet with the following code:

/* Remove bottom margin on last paragraph in container (front end) */

.gb-container p:last-child:last-of-type {
	margin-bottom: 0px;
}

And make sure that this snippet is set to “Site front-end styles” in the options within Code Snippets Pro.

A screenshot of the Code Snippets Pro editor showing the code pasted in and the "Site Front-End Styles" option selected.

CSS Snippet #2

Now, you need to make a second CSS Code Snippet with the following code:

/* Remove bottom margin on last paragraph in container (editor) */

.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
	margin-bottom: 0px;
}

But this time, set the Code Snippet to “Administration Area Styles” so it runs on the back-end.

A screenshot of the Code Snippets Pro editor showing the code pasted in and the "Administration Area Styles" option selected.

Wrapping Up

With either option, at this point you’re good to go.

The only drawback to this method that I’ve found thus far is that it’s hard to override this rule if, for whatever reason, you do want to have your normal paragraph margin. Setting a value in the GenerateBlocks “Spacing” controls will not override the margin-0 on either the front-end or back-end.

If you must circumvent this, then instead of margin, you could override with padding if necessary (though I’ve not needed to do this very often, and certainly a lot less than I was zeroing out the bottom margin previously).

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

3 thoughts on “Last Paragraph Bottom Margin”

  1. For this code to also work in the editor you can also add a style-editor.css file in the theme’s folder and paste the code in that file.

    Code Snippets does however make it easier for non-coders.

    Reply

Leave a Reply to Martin Cancel reply