Help Me Out

Complete wordpress noob here. I’m currently building a website on block theme and my website is pretty much almost done. During preview of the website, I noticed there’s some white space between header and paragraph on all the pages. I played around a bit with inspect and found out the issue with padding.

Here’s the code that’s responsible for the white space:

<div class=”is-layout-constrained wp-block-group alignfull” style=”padding-top:var(–wp–present–spacing–x1);padding-bottom:var(–wp–present–spacing–xx1)”>…</div> == $0

When I change padding to zero (“padding-top:0” & “padding-bottom:0”), the white space disappears. So now, how do I add this is additional css?

  1. The easiest way without breaking other areas of your site that use the same variable would be to redefine the variable for the specific element you want to change.

    So you could do something like:

    .is-layout-constrained {
    –wp-present-spacing-x1: 0px;
    –wp-present-spacing-xx1: 0px;

    It would be better if you could add a custom class to the specific block you want to modify, that way you can target your selector to that exact block without the risk of breaking something elsewhere.

    They you could just do:

    .your-custom-class {
    padding-top: 0 !important;
    padding-bottom: 0 !important;

  2. To add this code as additional CSS, you can use the Custom CSS option in your WordPress theme settings or create a child theme and add the CSS there.

    Go to Appearance > Customize in the WordPress admin menu

    Select the Additional CSS option

    Copy and paste the following code:

    .is-layout-constrained.wp-block-group {
    padding-top: 0 !important;
    padding-bottom: 0 !important;


This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer