Using Spacing Options in Divi | Scoreapps

Using Spacing Options in Divi

It is easy to customize spacing into sections, rows and modules with Divi Spacing Options.


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

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

In this guide, we will review all the spacing options available within the Divi Visual Builder.

The Difference Between Margin and Filling

There are two fundamental spacing measures in web design:

  • Margin- Margins control the space around an element

  • Filling- Filling controls the space within an element

In the Divi Spacing Options, you can adjust both. The higher the number, the more space there will be. The smaller the number, the less space there will be.

The difference between margin and padding

When to Use Margins

As margins serve to add space outside an element, they are often used to create separation between elements.

Examples:

  • Use the margin option to add or create space between multiple columns in a row.

  • Use the margin option to add or create space between multiple modules in a column.

Example of what margin is in web design

When to use Fill

The filling adds space within an element to create separation between the secondary elements it contains.

Examples:

  • Adding fill to a row would create space around the columns it contains.

  • Adding fill to a column would create space between its edges and any element it contains.

If you want to add space within an element and create more space between the content of the item and its edge, then use fill.

Example of what padding is in web design

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

You can use the Divi Builder to add margin and fill to any Divi element (Sections, Rows, Columns, Modules, etc.).

  1. Open the item's configuration window by clicking the gear icon.

  2. Go to the Design tab.

  3. Deploy the Spacing Settings group.

Where to find Divi Spacing Options

Add Margin in Divi

You can add margins in Divi by writing a numerical value or using the arrows to increase or decrease the margin.

If you want the values above and bottom to be the same, click the string icon between them to link them.

How to add margin in Divi Spacing Options

How to link margin values in Divi Spacing Options

This means that when you increase or decrease one value, the other will also increase or decrease. This helps keep your margins consistent and balanced.
How to link margin values in Divi Spacing Options

Add Filling in Divi

  1. Open the item's configuration window by clicking the gear icon.

  2. Go to the Design tab.

  3. Deploy the Spacing Settings group.

  4. Use the fill option to add or change the filling default values.

How to add Padding in Divi Spacing Options

As with the margin, to add filling, type a numerical value or use the up and down arrows to adjust the filling to greater or lesser.

How to adjust padding in Divi Spacing Options
If you want the values above and bottom to be the same, click the string icon between them to link them.

How to link values in Divi Spacing Options

Responsive Settings for Margin and Filling in Divi Spacing Options

It is easy to set specific values for margin and filling with Divi.

  • Hover your cursor over the margin or fill text.

  • Click the phone icon.

Three tabs will appear:

  • Desk

  • Tablet

  • Telephone

Navigate between them to set specific margins and fillings for each device type.

By default, mobile spacing will inherit what is configured in desktop view. However, with this option you can set unique margins for mobile devices.

Responsive Settings for Margin and Padding in Divi Spacing Options

Understanding the Default Space

By default, Divi comes with predefined spacing values to help speed up the design process. However, you can modify these values in the Theme Customizer.

To adjust these values, navigate to: Theme Customer → General Settings → Design Settings

Divi's default spacing options

Width of Space between Columns

The width of space is the margin you want between columns. You can increase or decrease this width by typing a numeric value or dragging the slider. The width of space is set as a percentage, and you have the option to set it up from 1 to 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 width of the row space individually within the configuration of each row.

Use Custom Width for Side Bar

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

How to adjust the custom sidebar with in Divi Spacing Options

Height of Section

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

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

Divi Spacing Options default section height

Height of the Row

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

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

Divi Spacing Options default row height

Mobile Spacing Settings Within Theme Customizer

Divi also has built-in mobile spacing values within the Theme Customizer. Navigate to: Theme Customer → Mobile Styles, where you can adjust the settings for tablets and phones.

Drag the slider or type a numeric value to adjust the settings.

Mobile styles available with Divi Spacing Options


Use appropriate CSS Units of Measurement

You can use two types of CSS units of measurement for size and spacing in Divi:

  • Absolute length units

  • Relative units of length

Absolute length units

The pixels (px) are ideal for adjusting items whose size you do not want it to change based on container or browser width (such as font size).

The absolute length is a fixed unit, so it will not change when the browser is resized, as it is not relative to any other element.

Relative units of length

Percentages (%) are better for horizontal spacing because they adjust according to browser width, keeping spacing consistent and adapted to mobile devices around the elements.

Rarely, if you should set horizontal filling in pixels, unless you plan to adjust that width at all the breakdown points needed for all mobile devices.

This is not a good practice in responsive web design.

To learn more about units of measurement 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 Fillers for Blank Spaces

Using blanks in web design is an important technique for creating attractive websites. Blank space is the space around the content and elements in your website design.

Blank space is used to balance the layout of a page and organize content visually appealing way. Margins and fillings help you create room between elements so that the design is balanced and without disorder.

How to utilize margins and padding for whitespace in web design

Understanding Negative Margins

Assigning negative values to margins makes it possible to bring one element closer to another. For example, adding a negative upper margin will move the item upwards on the page.

Understanding the negative margins in Divi Spacing Options

Although this may be useful in some cases, using other methods (such as position or translation transformation) is better practice for positioning elements on the page.

Important note:Negative values for margins should be avoided unless you have a good understanding of the impact these values can have on your design.

Understanding negative margins in Divi Spacing Options

Continue learning

Guide to Understanding and Apply CSS Length Units in Divi

5 Creative Ways to Use Integrated Margin and Space Controls