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
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.
When to Use Margins
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.
When to use Fill
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.
How to Add Margin and Fill to Elements with Divi Spacing Options
Open the item's configuration window by clicking the gear icon.
Go to the Design tab.
Deploy the Spacing Settings group.
Add Margin in Divi
If you want the values above and bottom to be the same, click the string icon between them to link them.
How to link margin values in Divi Spacing Options
Add Filling in Divi
Open the item's configuration window by clicking the gear icon.
Go to the Design tab.
Deploy the Spacing Settings group.
Use the fill option to add or change the filling default values.
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.
If you want the values above and bottom to be the same, click the string icon between them to link them.
Responsive Settings for Margin and Filling in Divi Spacing Options
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.
Understanding the Default Space
To adjust these values, navigate to: Theme Customer → General Settings → Design Settings
Width of Space between Columns
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
Height of Section
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.
Height of the Row
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.
Mobile Spacing Settings Within Theme Customizer
Drag the slider or type a numeric value to adjust the settings.
Use appropriate CSS Units of Measurement
Absolute length units
Relative units of length
Absolute length units
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
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.
Using Margins and Fillers for Blank Spaces
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.
Understanding Negative Margins
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.
Continue learning
5 Creative Ways to Use Integrated Margin and Space Controls
Popular Articles
How to Create an App for Restaurants (with or without Delivery)
Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...APPS: Radio
The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...APPS: Webhooks
The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...APPS: Audio & Music
How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...QR Promotions
This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...
Related Articles
Using Sizing Options in Divi
Divi Size Options make it easy to adjust the size of sections, rows, columns and modules in Divi. Divi Size Options make adjusting the size of sections, rows, columns and modules simple. Size is an essential part of creating attractive websites. ...Using Divi Transform Options
Divi transformation options are a set of powerful tools that allow you to manipulate web design in surprising ways, creating depth and attractive visual effects. Divi transformation options allow you to move elements, scale them, rotate them into ...Using Border Options in Divi
Divi border options allow you to easily add and stylize edges on any item on the page. With Divi Edge Options, it is possible to create truly unique designs for your website. You can apply custom edges to Divi elements, including sections, rows, and ...Divi Rows and Row Options
Therowsare thesecond largest construction blockwithin the Divi builder and can be used in various ways. &;amp;;;;; Rows of Divi and how to use them Therowsare thesecond largest construction blockwithin the Divi builder and can be used ...Using Divi Dynamic Content Options
Divi dynamic content options allow you to seamlessly extract content from your database and display it. Using Dynamic Content Options in Divi The function ofDynamic Content of Diviallows you to turn any Divi module into a dynamic element that ...