Divi Builder Plugin Documentation

Back To Divi Builder Plugin Documentation

Using Divi Spacing Options

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

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, and modules with Divi’s Spacing Options. In this doc, we’ll look at all of Divi’s Spacing options available within the Visual Builder.

In this doc, we’ll cover:

The Difference Between Margin and Padding

There are two fundamental spacing measurements in web design: margin and padding. In Divi’s Spacing Options you’re able to adjust both.

Margins control the space around an object while padding controls the space inside an element. 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. For example, it is best practice to use a margin to create spacing between multiple columns in a row. Another common use case would be to use a margin to separate elements (or modules) within a column.

Example of what margin is in web design

When To Use Padding

Padding adds space within an element to create separation between the child element(s) it contains. For example, adding padding to a row would create spacing around the column(s) it contains. Adding padding to a column would create spacing around any elements it contains. And so on. 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

In Divi, you can use the Divi Builder to add Margin and Padding to any Divi Element (Sections, Rows, Columns, Modules, etc.) To do this, open the settings of the Divi element, navigate to the Design tab, and select 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 stay the same as each other, then click the chainlink icon in between them to link the values.

How to link margin values in Divi Spacing Options

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

Adding Padding in Divi

To add padding to an element in Divi open up that element’s settings by clicking the gear icon, then navigate to the Design tab and click on the Spacing settings group.

How to add Padding in Divi Spacing Options

Just 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

You can click the chainlink icon to link the top and bottom values as well as the left and right values so you can easily adjust both sides at once for consistency.

How to link values in Divi Spacing Options

Responsive Settings for Margin and Padding in Divi Spacing Options

It’s easy to set mobile-specific margin settings for margin and padding with Divi. Simply hover over the margin or padding area and click the phone icon, triggering the tablet and phone settings options to appear. Three tabs will appear: Desktop, Tablet, and Phone. Tab through them to set moble-specific margins and padding. By default, mobile spacing will inherit what is set on the Desktop view, however with this option you have the choice to set unique margins for mobile.

Understanding Divi’s Default Spacing

By default, Divi comes with default spacing values to help jumpstart the design process. However, you’re able to 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.

1 = 0 margin between columns

2 = 3% right margin between columns

3 = 5.5% right margin between columns

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, then 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 in 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 in 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 comes with built-in spacing values for mobile devices within the Theme Customer. Navigate to Theme Customizer > Mobile Styles where you can tweak settings for tablet devices and phone devices. Simply 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

There are two types of CSS length units you can use throughout Divi for sizing and spacing:  absolute length units and relative length units.

Absolute length units, like px (pixels), 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, like %, are best for horizontal spacing as it adjusts based on the width of your browser, 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 simply 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

The use of whitespace in web design is an important technique for creating beautiful websites. Whitespace is the empty 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 if you add a negative top margin, that will move the element up on the page.

Understanding negative margins in Divi Spacing Options

Although this can be helpful in some instances, it might be better practice to use other methods (like position or transform translate) to position elements on the page.

Continue Learning

Join To Download Today