{"id":10765,"date":"2022-12-29T15:03:49","date_gmt":"2022-12-29T22:03:49","guid":{"rendered":"https:\/\/www.elegantthemes.com\/documentation\/?p=10765"},"modified":"2023-02-03T15:51:03","modified_gmt":"2023-02-03T22:51:03","slug":"spacing-options","status":"publish","type":"post","link":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/","title":{"rendered":"Using Divi Spacing Options"},"content":{"rendered":"<p>Spacing is an important element in web design. It helps organize your content and keep things clear and balanced. With Divi, it&#8217;s easy to customize spacing in sections, rows, and modules with Divi&#8217;s Spacing Options. In this doc, we&#8217;ll look at all of Divi&#8217;s Spacing options available within the Visual Builder.<\/p>\n<h2>In this doc, we&#8217;ll cover:<\/h2>\n<ul>\n<li><a href=\"#the-difference-between-margin-and-padding\">The Difference Between Margin and Padding<\/a>\n<ul>\n<li><a href=\"#when-to-use-margins\">When To Use Margins<\/a><\/li>\n<li><a href=\"#when-to-use-padding\">When To Use Padding<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#how-to-add-margin-and-padding-to-elements-in-divi\">How to Add Margin and Padding to Elements in Divi <\/a>\n<ul>\n<li><a href=\"#adding-margin-in-divi\">Adding Margin in Divi<\/a><\/li>\n<li><a href=\"#adding-padding-in-divi\">Adding Padding in Divi<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#responsive-settings-for-margin-and-padding\">Responsive Settings for Margin and Padding<\/a><\/li>\n<li><a href=\"#understanding-divis-default-spacing\">Understanding Divi&#8217;s Default Spacing<\/a>\n<ul>\n<li><a href=\"#website-gutter-width\">Website Gutter Width<\/a><\/li>\n<li><a href=\"#use-custom-sidebar-width\">Use Custom Sidebar Width<\/a><\/li>\n<li><a href=\"#section-height\">Section Height<\/a><\/li>\n<li><a href=\"#row-height\">Row Height<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#mobile-spacing-settings-within-theme-customizer\">Mobile Spacing Settings Within Theme Customizer<\/a><\/li>\n<li><a href=\"#margin-and-padding-tips-and-best-practices\">Margin and Padding Tips and Best Practices<\/a>\n<ul>\n<li><a href=\"#use-proper-css-length-units\">Use Proper CSS Length Units<\/a><\/li>\n<li><a href=\"#using-margins-and-paddings-for-whitespace\">Using Margins and Paddings For Whitespace<\/a><\/li>\n<li><a href=\"#understanding-negative-margins\">Understanding Negative Margins<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#more-resources\">Continue Learning<\/a><\/li>\n<\/ul>\n<h2 id=\"the-difference-between-margin-and-padding\">The Difference Between Margin and Padding<\/h2>\n<p>There are two fundamental spacing measurements in web design: margin and padding. In Divi&#8217;s Spacing Options you&#8217;re able to adjust both.<\/p>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15084 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options.png\" alt=\"The difference between margin and padding\" width=\"1800\" height=\"1200\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options-300x200.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options-1024x683.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options-768x512.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options-1536x1024.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3 id=\"when-to-use-margins\">When To Use Margins<\/h3>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15085 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-spacing-options.png\" alt=\"Example of what margin is in web design\" width=\"1800\" height=\"1200\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-spacing-options.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-spacing-options-300x200.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-spacing-options-1024x683.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-spacing-options-768x512.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-spacing-options-1536x1024.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3 id=\"when-to-use-padding\">When To Use Padding<\/h3>\n<p>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\u2019s content and the element\u2019s border, then use padding.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10798 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-spacing-options-01.png\" alt=\"Example of what padding is in web design\" width=\"1800\" height=\"658\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-spacing-options-01.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-spacing-options-01-300x110.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-spacing-options-01-1024x374.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-spacing-options-01-768x281.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-spacing-options-01-1536x561.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2 id=\"how-to-add-margin-and-padding-to-elements-in-divi\">How to Add Margin and Padding to Elements with Divi Spacing Options<\/h2>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15091 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-margins.jpg\" alt=\"Where to find Divi Spacing Options\" width=\"1800\" height=\"1200\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-margins.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-margins-300x200.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-margins-1024x683.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-margins-768x512.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-margins-1536x1024.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2 id=\"adding-margin-in-divi\">Adding Margin in Divi<\/h2>\n<p>You can add margins in Divi by typing in a numerical value or using the arrows to adjust the margin higher or lower.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15088 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-1.jpg\" alt=\"How to add margin in Divi Spacing Options\" width=\"1800\" height=\"1342\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-1.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-1-300x224.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-1-1024x763.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-1-768x573.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-1-1536x1145.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15089 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-2.jpg\" alt=\"How to link margin values in Divi Spacing Options\" width=\"1800\" height=\"1498\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-2.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-2-300x250.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-2-1024x852.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-2-768x639.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-spacing-options-2-1536x1278.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>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.<\/p>\n<h2 id=\"adding-padding-in-divi\">Adding Padding in Divi<\/h2>\n<p>To add padding to an element in Divi open up that element&#8217;s settings by clicking the gear icon, then navigate to the Design tab and click on the Spacing settings group.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15090\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-padding.jpg\" alt=\"How to add Padding in Divi Spacing Options\" width=\"1800\" height=\"1200\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-padding.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-padding-300x200.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-padding-1024x683.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-padding-768x512.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/adding-padding-1536x1024.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Just like with margin,\u00a0 to add padding, type in a numerical value or use the up and down arrows to adjust the padding higher or lower.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15092 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/add-padding.jpg\" alt=\"How to adjust padding in Divi Spacing Options\" width=\"1800\" height=\"1274\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/add-padding.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/add-padding-300x212.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/add-padding-1024x725.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/add-padding-768x544.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/add-padding-1536x1087.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15093 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/link-values-padding.jpg\" alt=\"How to link values in Divi Spacing Options\" width=\"1800\" height=\"1122\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/link-values-padding.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/link-values-padding-300x187.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/link-values-padding-1024x638.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/link-values-padding-768x479.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/link-values-padding-1536x957.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2 id=\"responsive-settings-for-margin-and-padding\">Responsive Settings for Margin and Padding in Divi Spacing Options<\/h2>\n<p>It\u2019s 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.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/19-spacing-options-01.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/19-spacing-options-01.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2 id=\"understanding-divis-default-spacing\">Understanding Divi&#8217;s Default Spacing<\/h2>\n<p>By default, Divi comes with default spacing values to help jumpstart the design process. However, you\u2019re able to override these default values in the Theme Customizer. To adjust these settings, navigate to<strong> Theme Customizer &gt; General Setting &gt; Layout Settings<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15095 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/themecustomerzer.jpg\" alt=\"Divi's default spacing options\" width=\"1800\" height=\"1200\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/themecustomerzer.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/themecustomerzer-300x200.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/themecustomerzer-1024x683.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/themecustomerzer-768x512.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/themecustomerzer-1536x1024.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3 id=\"website-gutter-width\">Website Gutter Width<\/h3>\n<p>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.<\/p>\n<p>1 = 0 margin between columns<\/p>\n<p>2 = 3% right margin between columns<\/p>\n<p>3 = 5.5% right margin between columns<\/p>\n<p>4 = 8% right margin between columns<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/12-spacing-options-01_1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/12-spacing-options-01_1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>Note: You can also set the gutter width of rows individually inside the row settings.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/13-spacing-options-01_1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/13-spacing-options-01.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h3 id=\"use-custom-sidebar-width\">Use Custom Sidebar Width<\/h3>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10837 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/13.b-spacing-options-01.png\" alt=\"How to adjust the custom sidebar with in Divi Spacing Options\" width=\"1800\" height=\"1006\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/13.b-spacing-options-01.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/13.b-spacing-options-01-300x168.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/13.b-spacing-options-01-1024x572.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/13.b-spacing-options-01-768x429.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/13.b-spacing-options-01-1536x858.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3 id=\"section-height\">Section Height<\/h3>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10835 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/14-spacing-options-01.png\" alt=\"Divi Spacing Options default section height\" width=\"1800\" height=\"1006\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/14-spacing-options-01.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/14-spacing-options-01-300x168.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/14-spacing-options-01-1024x572.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/14-spacing-options-01-768x429.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/14-spacing-options-01-1536x858.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3 id=\"row-height\">Row Height<\/h3>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10836 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/15-spacing-options-01.png\" alt=\"Divi Spacing Options default row height\" width=\"1800\" height=\"1006\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/15-spacing-options-01.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/15-spacing-options-01-300x168.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/15-spacing-options-01-1024x572.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/15-spacing-options-01-768x429.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/15-spacing-options-01-1536x858.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3 id=\"mobile-spacing-settings-within-theme-customizer\">Mobile Spacing Settings Within the Theme Customizer<\/h3>\n<p>Divi also comes with built-in spacing values for mobile devices within the Theme Customer. Navigate to <strong>Theme Customizer &gt; Mobile Styles<\/strong> 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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15097 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/theme-customizer-mobile.jpg\" alt=\"Mobile styles available with Divi Spacing Options\" width=\"1800\" height=\"1200\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/theme-customizer-mobile.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/theme-customizer-mobile-300x200.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/theme-customizer-mobile-1024x683.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/theme-customizer-mobile-768x512.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/theme-customizer-mobile-1536x1024.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2 id=\"margin-and-padding-tips-and-best-practices\">Divi Spacing Options Tips and Best Practices<\/h2>\n<h3 id=\"use-proper-css-length-units\">Use Proper CSS Length Units<\/h3>\n<p>There are two types of CSS length units you can use throughout Divi for sizing and spacing:\u00a0 absolute length units and relative length units.<\/p>\n<p><strong>Absolute length units,<\/strong> like px (pixels), are best for making adjustments to elements that you don&#8217;t want to change their size based on the width of the container it&#8217;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.<\/p>\n<p><strong>Relative length units<\/strong>, 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.<\/p>\n<p>To learn more about length units in web design, read our <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/a-guide-to-understanding-and-applying-css-length-units-in-divi\">Guide to Understanding and Applying CSS Length Units in Divi<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/04\/length-unit-featured.png\" alt=\"A Guide to Understanding and Applying CSS Length Units in Div\" width=\"960\" height=\"440\" \/><\/p>\n<h3 id=\"using-margins-and-paddings-for-whitespace\">Using Margins and Paddings For Whitespace<\/h3>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10870 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/whitespace-example.png\" alt=\"How to utilize margins and padding for whitespace in web design\" width=\"1800\" height=\"928\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/whitespace-example.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/whitespace-example-300x155.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/whitespace-example-1024x528.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/whitespace-example-768x396.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/whitespace-example-1536x792.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3 id=\"understanding-negative-margins\">Understanding Negative Margins<\/h3>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15099 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/negative-margins.png\" alt=\"Understanding negative margins in Divi Spacing Options\" width=\"1800\" height=\"1200\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/negative-margins.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/negative-margins-300x200.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/negative-margins-1024x683.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/negative-margins-768x512.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/negative-margins-1536x1024.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>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.<\/p>\n<h2 id=\"more-resources\">Continue Learning<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/a-guide-to-understanding-and-applying-css-length-units-in-divi\">A Guide to Understanding and Applying CSS Length Units in Divi<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/divi-margin-and-gutter-controls\">5 Creative Ways to Use Divi\u2019s Built-In Margin and Gutter Controls<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p> It\u2019s easy to customize spacing in sections, rows, and modules with Divi\u2019s Spacing Options.<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,2],"tags":[],"class_list":["post-10765","post","type-post","status-publish","format-standard","hentry","category-divi-builder","category-divi"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\n<meta name=\"description\" content=\"Divi Spacing Options makes it easy to add margins and padding and space design elements throughout your website design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Divi Spacing Options - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"Divi Spacing Options makes it easy to add margins and padding and space design elements throughout your website design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-29T22:03:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-03T22:51:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options.png\" \/>\n<meta name=\"author\" content=\"Chaucee Stillman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chaucee Stillman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/\"},\"author\":{\"name\":\"Chaucee Stillman\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\"},\"headline\":\"Using Divi Spacing Options\",\"datePublished\":\"2022-12-29T22:03:49+00:00\",\"dateModified\":\"2023-02-03T22:51:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/\"},\"wordCount\":1316,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/2-spacing-options.png\",\"articleSection\":[\"Divi Builder Plugin Documentation\",\"Divi Theme Documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/\",\"name\":\"Using Divi Spacing Options - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/2-spacing-options.png\",\"datePublished\":\"2022-12-29T22:03:49+00:00\",\"dateModified\":\"2023-02-03T22:51:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\"},\"description\":\"Divi Spacing Options makes it easy to add margins and padding and space design elements throughout your website design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/2-spacing-options.png\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/2-spacing-options.png\",\"width\":1800,\"height\":1200,\"caption\":\"The difference between margins and spacing\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/spacing-options\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Divi Spacing Options\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\",\"name\":\"Chaucee Stillman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"caption\":\"Chaucee Stillman\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","description":"Divi Spacing Options makes it easy to add margins and padding and space design elements throughout your website design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/","og_locale":"en_US","og_type":"article","og_title":"Using Divi Spacing Options - Elegant Themes Documentation","og_description":"Divi Spacing Options makes it easy to add margins and padding and space design elements throughout your website design.","og_url":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2022-12-29T22:03:49+00:00","article_modified_time":"2023-02-03T22:51:03+00:00","og_image":[{"url":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options.png","type":"","width":"","height":""}],"author":"Chaucee Stillman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Chaucee Stillman","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/#article","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/"},"author":{"name":"Chaucee Stillman","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8"},"headline":"Using Divi Spacing Options","datePublished":"2022-12-29T22:03:49+00:00","dateModified":"2023-02-03T22:51:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/"},"wordCount":1316,"image":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/#primaryimage"},"thumbnailUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options.png","articleSection":["Divi Builder Plugin Documentation","Divi Theme Documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/","url":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/","name":"Using Divi Spacing Options - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/#primaryimage"},"image":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/#primaryimage"},"thumbnailUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options.png","datePublished":"2022-12-29T22:03:49+00:00","dateModified":"2023-02-03T22:51:03+00:00","author":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8"},"description":"Divi Spacing Options makes it easy to add margins and padding and space design elements throughout your website design.","breadcrumb":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/#primaryimage","url":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options.png","contentUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-spacing-options.png","width":1800,"height":1200,"caption":"The difference between margins and spacing"},{"@type":"BreadcrumbList","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/spacing-options\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.elegantthemes.com\/documentation\/"},{"@type":"ListItem","position":2,"name":"Using Divi Spacing Options"}]},{"@type":"WebSite","@id":"https:\/\/www.elegantthemes.com\/documentation\/#website","url":"https:\/\/www.elegantthemes.com\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.elegantthemes.com\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8","name":"Chaucee Stillman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","caption":"Chaucee Stillman"}}]}},"_links":{"self":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/10765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/comments?post=10765"}],"version-history":[{"count":60,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/10765\/revisions"}],"predecessor-version":[{"id":15720,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/10765\/revisions\/15720"}],"wp:attachment":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/media?parent=10765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/categories?post=10765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/tags?post=10765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}