{"id":28900,"date":"2022-09-16T19:37:00","date_gmt":"2022-09-16T16:37:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=28900"},"modified":"2023-08-17T17:26:15","modified_gmt":"2023-08-17T14:26:15","slug":"create-space-with-padding-and-margin","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/","title":{"rendered":"Create space with padding and margins"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Imagine you have a valuable object and it is placed in a display case. You may wish to protect the case from getting touched or bumped over, by putting a barrier rope around it. By doing this, you are adding \u201cmargins\u201d around the outside of your display case.<\/p>\n\n\n\n<p>Now that the case is nice and safe you wish to arrange the object nicely inside the case by adjusting it slightly left and right. You also discover it looks best if sitting on a pedestal. By doing this, you are adjusting the \u201cpadding\u201d of the object inside of its case.<\/p>\n\n\n\n<p><strong>You may ask: Can\u2019t I just use a spacer widget?<\/strong><\/p>\n\n\n\n<p>While it is possible to use spacer widgets, this creates additional dividers and code. It is best practice to use margins and paddings to achieve your goal when possible.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">About Margins and Padding<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/margin_padding-1024x373.png\" alt=\"\" class=\"wp-image-28901\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Margin<\/h3>\n\n\n\n<p>The margin controls the amount of space or around or \u201coutside\u201d of the element. Margins are used to move an element up or down in a container as well as left or right. Each side of the element has a margin size you can change individually. In creating the gap, the margin pushes adjacent elements away.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Negative Margins<\/h4>\n\n\n\n<p>In some cases, a negative margin is applied to an element, in combination with z-index, in order to \u201cstack\u201d elements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Negative-Margins-1024x546.png\" alt=\"\" class=\"wp-image-28902\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Negative Margins on Sections and Columns<\/h4>\n\n\n\n<p>A negative margin can be used in combination with z-index elements to overlap sections visually. In this example, the lower section is being moved up to cover the background of the above. A top margin of -6% is entered in the top value field.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Negative-Margins-2-1024x387.png\" alt=\"\" class=\"wp-image-28903\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Padding<\/h3>\n\n\n\n<p>The padding controls the amount of space \u201cinside\u201d the container. It is the space between the element and the related content inside it. It also shows the container background around the element in it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Padding with Sections and Columns<\/h4>\n\n\n\n<p>Padding is used in sections and columns to allow your elements \u201croom to breath\u201d. In this example, a 5% top and bottom padding is added to the section. A 5% left padding is applied to the right column. This provides the user with more \u201cwhite space\u201d and is more visually appealing.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Padding-with-Sections-and-Columns-1024x578.png\" alt=\"\" class=\"wp-image-28904\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Locating the Margins and Paddings settings<\/h2>\n\n\n\n<p>You may find the general paddings and margins settings of an element in the <strong>Advanced Tab<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Locating-the-Margins-and-Paddings-settings.png\" alt=\"\" class=\"wp-image-28905\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Locating Additional Padding Settings<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Style Tab<\/h5>\n\n\n\n<p>Some widgets may have additional <strong>Style Tab<\/strong> settings that use paddings and margins such as buttons and forms.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Locating-Additional-Padding-Settings-1024x452.png\" alt=\"\" class=\"wp-image-28906\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Site Settings<\/h5>\n\n\n\n<p>You may also find settings for margins and paddings in your <strong>Site Settings<\/strong>. These will be used as the default settings. Settings used in the <strong>Style Tab<\/strong> will override these settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Site-Settings.png\" alt=\"\" class=\"wp-image-28907\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Using Margins and Padding<\/h2>\n\n\n\n<p>The margin and padding value may be set in PX, EM, %, or REM. To change the values individually, click the chain icon to unlink them.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Using-Margins-and-Padding.png\" alt=\"\" class=\"wp-image-28908\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Here comes TRouBLe<\/h2>\n\n\n\n<p>Margins and padding values are in the CSS order top, right, bottom, and left. For instance, you may see a CSS class using 10px, 25px, 10px, 25px. This would indicate that it has 10px padding on the top and bottom, and 25px padding left and right. You can easily remember this by using the anagram TRouBLe.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to use paddings and margins with Elementor to create space in your designs.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65ba354263d685215b4a315a"],"footnotes":""},"categories":[1439],"tags":[],"class_list":["post-28900","post","type-post","status-publish","format-standard","hentry","category-basic-functionality"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create space with padding and margins | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Create space with padding and margins in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create space with padding and margins | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Create space with padding and margins in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-16T16:37:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T14:26:15+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Create space with padding and margins\",\"datePublished\":\"2022-09-16T16:37:00+00:00\",\"dateModified\":\"2023-08-17T14:26:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/\"},\"wordCount\":539,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/margin_padding-1024x373.png\",\"articleSection\":[\"Basic functionality\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/\",\"url\":\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/\",\"name\":\"Create space with padding and margins | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/margin_padding-1024x373.png\",\"datePublished\":\"2022-09-16T16:37:00+00:00\",\"dateModified\":\"2023-08-17T14:26:15+00:00\",\"description\":\"Learn everything about Create space with padding and margins in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Basic functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/basic-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Create space with padding and margins\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create space with padding and margins | Elementor","description":"Learn everything about Create space with padding and margins in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/","og_locale":"en_US","og_type":"article","og_title":"Create space with padding and margins | Elementor","og_description":"Learn everything about Create space with padding and margins in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/","og_site_name":"Help","article_published_time":"2022-09-16T16:37:00+00:00","article_modified_time":"2023-08-17T14:26:15+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Create space with padding and margins","datePublished":"2022-09-16T16:37:00+00:00","dateModified":"2023-08-17T14:26:15+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/"},"wordCount":539,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/margin_padding-1024x373.png","articleSection":["Basic functionality"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/","url":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/","name":"Create space with padding and margins | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/margin_padding-1024x373.png","datePublished":"2022-09-16T16:37:00+00:00","dateModified":"2023-08-17T14:26:15+00:00","description":"Learn everything about Create space with padding and margins in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Basic functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/basic-functionality\/"},{"@type":"ListItem","position":5,"name":"Create space with padding and margins"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/28900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=28900"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/28900\/revisions"}],"predecessor-version":[{"id":38532,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/28900\/revisions\/38532"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=28900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=28900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=28900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}