Kadence - Guide to spacing, padding, and margins

In Kadence, you have full control over how your site looks, and that includes spacing!

Global content spacing

The global spacing settings (e.g. default spacing for your site) are located at Appearance > Customize > General > Layout.

The values shown will vary based on your theme. You're welcome to change these values to whatever you'd like, but we don't recommend less than 1rem for either spacing value.

Global mobile spacing: You can also control these values separately for tablet and mobile. Above the numerical field, there are icons for desktop, tablet, and mobile. You can select the tablet or mobile icons to control the values for each of those screen sizes.

Disable vertical spacing on individual pages

With certain page layouts, you may not want space at the top and/or bottom of the page.

  1. To disable the top or bottom spacing, open the page in the Block Editor.
  2. At the top right corner of your screen, select the Page Settings icon.
  3. Look for the Content Vertical Spacing section. Here, there are several options:
  • Default: The default spacing values you have set in the Customizer
  • Enable: Enables the top/bottom values you have set in the Customizer (has the same effect as Default)
  • Disable: Disables the top/bottom values you have set in the Customizer (e.g. no space on top or bottom)
  • Top Only: Enables space on top; disables space on bottom
  • Bottom Only: Enables space on bottom; disables space on top

Change spacing in individual blocks

Spacing methods can vary between different blocks, but here is the overall gist!

  1. In the Block Editor, click on the parent Row Layout for the block you'd like to adjust.
  2. The Row Layout settings for that block will appear on the right. Click on the "Advanced" tab.
  3. Under Advanced, you can control both the padding and margin for the Row Layout.

Padding is the spacing within a section. For example, if your Row Layout has a background color, then adding more padding would add more background color.

Margin is the spacing around a section, i.e. white space between sections.

Here's an example of what you could change here: Let's say you wanted more blue space at the top and bottom of this section. You could increase the top and bottom padding values from 4em to 6em.

Now let's say you wanted to add more white space below this section. Perhaps the section underneath is too close. You could change the bottom margin from 2em to 4em. Or you could select the block below and increase its top margin value.

Tips for block spacing

Mobile block spacing: Just like the global spacing, you can also manage tablet and mobile spacing separately from desktop. To the right of the "Padding" and "Margin" text, look for the desktop, tablet, and mobile icons. Select these icons to control the values for each screen size.

Don't see existing values in the block you selected?: You can add your own if they don't already exist for a particular Row Layout! Click on the little slider icon near the mobile icons (highlighted blue in the screenshot above), which will let you enter numerical values. We suggest using em or rem for units of measurement when it comes to spacing.

Negative margins (advanced): It's possible to enter negative values in any of the margin fields. Please note that negative padding is not possible. Just be mindful when it comes to negative margins – things can get wonky on mobile, so watch out for that!