Skip to main content
Using Divi Spacing Options

It’s easy to customize spacing in sections, rows, and modules with Divi’s Spacing Options.

Updated over a week ago

Spacing is an important element in web design. It helps organize your content and keep things clear and balanced.

With Divi, it's easy to customize spacing in Sections, Rows, Columns and Modules with Divi's Spacing Options.

In this guide, we'll look at all of Divi's Spacing options available within the Visual Builder.

The Difference Between Margin and Padding

There are two fundamental spacing measurements in web design:

  1. Margin - Margins control the space around an element

  2. Padding - Padding controls the space inside an element

In Divi's Spacing Options, you're able to adjust both. The higher the number, the more space. The lower the number, the less space.

The difference between margin and padding

When To Use Margins

Because margins are for adding space outside of an element, they are often used for creating separation between elements.

Examples:

  • Use the Margin option to add/create spacing between multiple columns in a Row.

  • Use the Margin option to add/create spacing between multiple modules in a Column.

Example of what margin is in web design

When To Use Padding

The Padding adds space within an element to create separation between the child element(s) it contains.

Examples:

  • Adding padding to a Row would create spacing around the column(s) it contains.

  • Adding padding to a column would create spacing between its borders and any elements it contains.

If you want to add space inside an element and create more space between the element’s content and the element’s border, then use padding.

Example of what padding is in web design

How to Add Margin and Padding to Elements with Divi Spacing Options

You can use the Divi Builder to add Margin and Padding to any Divi Element (Sections, Rows, Columns, Modules, etc.).

  1. Open the element's Settings window by clicking on the gear icon

  2. Go to the Design tab

  3. Expand the Spacing settings group.

Where to find Divi Spacing Options

Adding Margin in Divi

You can add margins in Divi by typing in a numerical value or using the arrows to adjust the margin higher or lower.

How to add margin in Divi Spacing Options

If you want the top and bottom values to be the same, click the chainlink iconbetween them to link them.

How to link margin values in Divi Spacing Options

This means when you increase or decrease one value, the other will increase or decrease. This helps keep your margins consistent and balanced.

Adding Padding in Divi

  1. Open the element's Settings window by clicking on the gear icon

  2. Go to the Design tab

  3. Expand the Spacing settings group.

  4. Use the Padding option to add/change the default padding values

How to add Padding in Divi Spacing Options

Like with margin, to add padding, type in a numerical value or use the up and down arrows to adjust the padding higher or lower.

How to adjust padding in Divi Spacing Options

If you want the top and bottom values to be the same, click the chainlink iconbetween them to link them.

How to link values in Divi Spacing Options

Responsive Settings for Margin and Padding in Divi Spacing Options

Setting mobile-specific values for margin and padding with Divi is easy.

  1. Hover over the margin or padding text

  2. Click the phone icon

Three tabs will appear:

  • Desktop

  • Tablet

  • Phone.

Tab through them to set responsive-specific margins and padding.

By default, mobile spacing will inherit what is set on the Desktop view. However, with this option, you can set unique margins for mobile.

Responsive Settings for Margin and Padding in Divi Spacing Options

Understanding Divi's Default Spacing

By default, Divi comes with default spacing values to help jumpstart the design process. However, you can override these default values in the Theme Customizer.

To adjust these settings, navigate to Theme Customizer General Setting Layout Settings

Divi's default spacing options

Website Gutter Width

Gutter width is the margin space you want between columns. You can increase or decrease the gutter width by typing in a numerical value or dragging the range slider. The gutter width is set as a percentage, and you have the option to set the gutter width from 1-4.

  • Value 1 no space (margin) between columns

  • Value 2 - 3% right margin between columns

  • Value 3 - 5.5% right margin between columns

  • Value 4 - 8% right margin between columns

Note: You can also set the gutter width of rows individually inside the row settings.

Use Custom Sidebar Width

To set a custom width for the default sidebar on blog posts, use the range slider to adjust the value or type in a numerical number.

How to adjust the custom sidebar with in Divi Spacing Options

Section Height

This determines the height of sections based on a percentage. By default, section heights are set to 4.

You can increase or decrease this value by typing a numerical number or dragging the range slider. This will increase or decrease the default height of sections in Divi.

Divi Spacing Options default section height

Row Height

This determines the default height of rows based on a percentage. By default, row heights are set to 2.

You can increase or decrease this value by typing a numerical number or dragging the range slider. This will increase or decrease the default height of rows within Divi.

Divi Spacing Options default row height

Mobile Spacing Settings Within the Theme Customizer

Divi also has built-in spacing values for mobile devices within the Theme Customer. Navigate to Theme Customizer Mobile Styles, where you can tweak tablet and phone settings settings.

Drag and drop the range slider or type in a numerical value to adjust the settings.

Mobile styles available with Divi Spacing Options

Divi Spacing Options Tips and Best Practices

Use Proper CSS Length Units

You can use two types of CSS length units throughout Divi for sizing and spacing:

  1. Absolute length units

  2. Relative length units.

Absolute length units

Pixels (px), are best for making adjustments to elements that you don't want to change their size based on the width of the container it's in or the browser (like font size).

Absolute length is a fixed-length unit, so it will not change with the browser resizing as it is not relative to anything else.

Relative length units

Percentages (%), are best for horizontal spacing as they adjust based on your browser's width, keeping your spacing consistent and mobile-responsive around elements.

You should rarely, if ever, set horizontal padding in pixels unless you plan on adjusting that width at all of the necessary breakpoints for all mobile devices.

This is not good practice in the world of mobile-responsive design.

To learn more about length units in web design, read our Guide to Understanding and Applying CSS Length Units in Divi.

A Guide to Understanding and Applying CSS Length Units in Div

Using Margins and Paddings For Whitespace

Using whitespace in web design is an important technique for creating beautiful websites. Whitespace is the space around the content and elements in your website design.

Whitespace is used to balance a page design and organize the content in a visually appealing way. Margins and padding help you create space between elements so the design is balanced and clutter-free.

How to utilize margins and padding for whitespace in web design

Understanding Negative Margins

Giving margins a negative value allows you to draw an element closer to another element. So, adding a negative top margin will move the element up on the page.

Understanding negative margins in Divi Spacing Options

Although this can be helpful in some instances, using other methods (like position or transform translate) is better practice for positioning elements on the page.

Important note: Using negative values for the margin option should be avoided unless you are familiar with and have a good understanding of the impact negative values can have on your layout

Continue Learning

Did this answer your question?