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.

There are two fundamental spacing measurements in web design:

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.

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

The Padding adds space within an element to create separation between the child element(s) 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.

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

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

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

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

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.

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

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

Three tabs will appear:

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.

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

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.

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.

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.

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 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.

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

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.

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.

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.

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.

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.