{"id":1704,"date":"2021-06-20T10:12:35","date_gmt":"2021-06-20T10:12:35","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1704"},"modified":"2023-02-22T09:37:03","modified_gmt":"2023-02-22T09:37:03","slug":"margin-and-padding-basics-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/","title":{"rendered":"Margin and Padding Basics"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1704\" class=\"elementor elementor-1704\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1b41e5c5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1b41e5c5\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2e65d57a\" data-id=\"2e65d57a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-22df92e4 elementor-widget elementor-widget-video\" data-id=\"22df92e4\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=YhmwlWb8amY&amp;t=581s&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3cf1ca18 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3cf1ca18\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7f6778a0\" data-id=\"7f6778a0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-26393051 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"26393051\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-6411\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-6411\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-6412\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-6412\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-6411\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-6411\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-6411\" tabindex=\"0\" hidden=\"false\"><p>Margin and padding are used to create space between elements, and directly impact the layout as well as the look and feel of your site. It\u2019s important to know what these 2 properties do and how they affect your design.<\/p><p>In this tutorial we&#8217;ll cover:<br \/>\u2714\ufe0e The difference between margin and padding<br \/>\u2714\ufe0e When to use margin or padding<br \/>\u2714\ufe0e Responsive editing<br \/>\u2714\ufe0e Z-Index and column alignment<br \/>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-6412\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-6412\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-6412\" tabindex=\"0\" hidden=\"hidden\"><p>INTRO<\/p><p>Hi all, it&#8217;s Ziv from Elementor.<\/p><p>In this tutorial, I&#8217;ll go over margin and padding basics, and show you how they can be used to build creative designs, just like the one you see here.<\/p><p>As you most likely know, \u201cmargins\u201d and \u201cpaddings\u201d are used to create \u201cspace\u201d between elements..<br \/>And directly impact the layout as well as the look and feel of your site.<br \/>Creating a natural flow for the user to navigate through the content is important.. Especially when looking to increase conversions by guiding the visitor down a page to a conversion point.<\/p><p>Therefore, it\u2019s important to know what these 2 properties do and how they affect your design. There are important differences which we\u2019ll go over in this tutorial.. and, once you understand them, you\u2019ll be able to make better design decisions.<\/p><p>Let\u2019s make a start!<\/p><p><br \/>STEPS<\/p><p><br \/>We will be working with this section, which has 2 equally sized columns. (I\u2019ve set the section\u2019s height to \u201cFit to the Screen\u201d, and the column position is set to middle.. so the columns appear in the center. This will give us a clear point of view for the tutorial) <br \/>There\u2019s are 3 widgets in the right column: the heading, text editor and button widgets. <br \/>Let\u2019s drag an image widget into the left one.<\/p><p>(As you can see, there already is some default space between the image widget and the column. We\u2019ll get to that in a bit.)<br \/>* For example purposes, I\u2019ll refer to the (image) widget as the \u201celement\u201d and the actual image as the \u201ccontent\u201d just to keep things clear. (The same goes for Just like the text in the text editor widget is the \u201ccontent\u201d and the widget itself the \u201celement\u201d)<br \/>Let\u2019s start off by giving the image widget a border [ advanced &gt; border &gt; solid &gt; color: raspberry &gt; width: 5]<br \/>This will help us see how the margin and padding properties behave. <br \/>The border surrounds the element\u2019s content. (element=image widget, content=image )<br \/>Next, in advanced, I\u2019ll add some padding [70px all around], as you can see it adds space inside the border.. Padding is used to create space around the content, inside the defined border. This applies to widgets, columns, and sections alike.. More on that soon.<br \/>You can see that padding grows the element&#8217;s (widget) size and shrinks the content inside and vice versa. [decrease till 30, increase till 70 again]<br \/>Padding goes around all four sides of the content and you can target and change the padding for each side. <br \/>When the values are linked.. All sides get the same value. To set them individually simply click to unlink them,.. I\u2019ll decrease the padding on the right a bit [to 30px], and increase the left [to 150px]. <br \/>Linking them together again, automatically set\u2019s them back to the 70px we set before<br \/>As you can see, the border surrounds both the padding and content<br \/>Let\u2019s give the image widget a background color and see what happens. [advanced, basil]<br \/>The Padding is affected by the styling of an element, such as the background color you see here.<br \/>Now lets give the image widget some margin and see if it behaves differently. [Advanced &gt; margin: 30px all around] <br \/>As you can see it adds space outside the border.. Margin is used to create space around the element (the widget) outside the defined border. Again, this applies to widgets, columns, and sections alike. <br \/>Also, margin isn\u2019t affected by the styling of the element, such as background color. But it is affected by the styling of the container it\u2019s in.. in this case the column, let\u2019s give it a background color so you can see.. <br \/>If both background colors are the same though, things can get confusing, especially when designing without borders.<br \/>BTW, It\u2019s important to know that in the editor.. the section\/column and widget handels and outlines aren\u2019t the borders.. <br \/>As you can see the margin we added to the image widget appears inside the blue outline of the widget. This might be confusing at first, because when we remove the margin and padding, they seem to be the same.[remove margin and padding, add back: m30, p70]<br \/>The same principals apply to columns and sections, and any element you can assign the margin and padding properties to. <br \/>Let\u2019s give the column a border as well so you can see. [color: raspberry &gt; width: 5] Heads up, things might seem more confusing before the penny drops.. No worries..at the end of this tutorial you\u2019ll now the ins and outs of it all.. <br \/>Let\u2019s add some margin\u2026\u2026&#8230; and padding [30px both] <br \/>As you can see, it behaves the same as with the image widget. [set section background color: basi]<br \/>*Okay so let\u2019s recap what we have over here: this is the image.. which is the widget\u2019s content.. Outside it, is some green padding.. It\u2019s green because of the widget\u2019s background color, the pink border separates the padding from the margin.. which is purple because of the column\u2019s background color.. The column\u2019s padding and the image widget\u2019s margin seem to be the same because of it,.. And lastly.. the column\u2019s margin will get the same color as the section\u2019s background.. [change it &gt; remove it]<br \/>Don\u2019t panic if you are still a bit confused.. I\u2019ll show you some more examples so things become crystal clear.<br \/>Now that we know the basics, let\u2019s reset all of the styling and go over some practical applications for using margins and padding. Soon we\u2019ll check out mobile responsive settings as well.<br \/>Let\u2019s select the image. Like I mentioned before.. you can see that there&#8217;s some space elementor adds to the column to keep things organised by default. Let\u2019s remove it so the image widget takes up all of the column\u2019s space. <br \/>Pop-quiz.. Is that the column\u2019s margin or the padding?<br \/>Well, done.. It\u2019s the padding.. Because it\u2019s the space inside the column\u2019s defined border. <br \/>Let\u2019s unlink it, as you can see ..all values are set to 0, so no padding is set.. Allowing the image widget to fill up the space. <br \/>I\u2019ll go ahead and select the image for this design<br \/>Now let&#8217;s see how Margins and paddings can be used to position the widget&#8217;s in the right column. <br \/>Often the same visual layout can be achieved by using margin and padding, so when do we know what to use?<br \/>As a rule of thumb,.. Margin is used to space an element in relationship to other elements on the page. <br \/>For example,&#8230; to create space between the heading, text editor and button widgets we can add some margin at the top and bottom of the text editor widget [20px top, 80px bottom]<br \/>Padding on the other hand, is used to create distance between the content ..and border.. of an element. This way we can adjust the appearance of the element itself.. Just like you see when we add some padding on the right over here [80px padding right on text editor, then 200],..<br \/>It\u2019s important to note that for beginners, using margin and padding can be confusing because both are parts of your element even if you don\u2019t include a border. Especially when the section, column and widget backgrounds are the same colour.. Just like we saw earlier.<br \/>By adding a border, things start to clear up a bit. Let\u2019s add one to this text editor, we can see that the border surrounds the content (the text).. And now the top and bottom margins we added to the widget earlier.. are easier to identify<br \/>Also, by Adding a background colour, we can see that the margins aren\u2019t affected by the element\u2019s styling. But the padding is! [hover mouse over the padding on the right side ] <br \/>There are many creative ways to use paddings and margins, so keep these basics in mind when playing around with them.. <br \/>Let\u2019s remove the background colour and border.. <br \/>And back in the advanced dropdown.. check out the margin and padding some more..<br \/>These responsive handles.. as you might know, indicate that the values can be adjusted for tablet and mobile devices. Currently they are set for desktop. <br \/>Let\u2019s enter the mobile responsive mode and see how the margin and padding behave. <br \/>As you can see,..they are left blank&#8230; Indicating they inherit the larger device&#8217;s settings.. which in our case are the values we set for desktop. <br \/>Let\u2019s get rid of the 200px padding on the right first [switch to desktop and back again via the responsive handle shortcut] By unlinking the values,.. we reset them all to 0. Then simply add the desired padding for mobile [50px right]<br \/>Same goes for the margin,.. Unlinking..removes the values inherited from the desktop.. Then set them for mobile<br \/>It\u2019s important to make sure you check all padding and margin settings on desktop, tablet, and mobile. And remember,.. If they are left blank they will inherit the larger device&#8217;s settings.<br \/>Okay we\u2019re almost done here.. [back to desktop] Just a few more tips to see how Elementor can be used to help you make better design decisions.<br \/>I\u2019ll go ahead and delete the text editor widget. <br \/>And instead of using margin or padding to position the heading and button widgets, I\u2019ll enter the column settings.. and in Layout, set the vertical align. There are many options to choose from, so make sure you checkout the dedicated video I\u2019ve linked in the description below.. to understand what each one does. For this example I\u2019ll set it to middle, so all widget\u2019s in the column automatically vertically align to the middle <br \/>BTW, Depending on your design needs.. if you want to increase or decrease the default space between these widgets, you can set the widget space over here. [set to 100, then delete]<br \/>Lastly, if you want to position elements outside their container,.. you can use negative margins. <br \/>They allow you to move widgets and columns above or below other nearby elements on the page..improving your designs when used accordingly.<br \/>Let\u2019s say, you want to move this heading widget to left a bit ..outside the column..so it overlaps with the image in the column on the left<br \/>All you need to do, is add a negative margin to the left side of the heading widget.. As you can see,.. The content moves toward the left ..onto the column next to it.. [-370px]<br \/>Let\u2019s also add a background color [white],.. <br \/>Likewise, Adding a negative top margin to the image widget for example, moves it upward.. [-150px]<br \/>A good example to You can use this technique to improve conversion rates by breaking up straight borders.. for example [set raspberry background color in right column to see straight line]<br \/>This way.. visitors will see the image first ..and know to keep scrolling down the page.<br \/>This only works for margins though, because negative padding would cause the border to collapse into the content &#8211; which in turn would make the content area smaller than the content, which doesn&#8217;t make sense. [remove the negative margin and raspberry background color]<br \/>Lets add some padding though, to increase the space around the content [100px all around]<br \/>Like I mentioned earlier.. Tablet and mobile responsive modes automatically inherit any negative margins you set for your desktop designs, so make sure to check them when making mobile edits [show responsive tablet mode and go back to desktop] <br \/>Another thing to pay attention to when using negative margins, is the z-index. <br \/>The heading widget automatically appears on top of the image widget in the column of the left. But what if your design requires something else..?<br \/>By adding a Z-Index value to an element, you can make sure it appears on top of another element.<br \/>So let\u2019s say we wan\u2019t the image to appear on top of the heading.. <br \/>All you need to do, is go to the image widget\u2019s Advanced tab, and in Z-Index ..adjust the value.. I\u2019ll set it to 1. As you can see, you can use Z-Index values to layer different elements on top of each other. The largest Z-Index value will appear on top. (note that this can be done for widgets, columns, and sections alike)<br \/>For example, if you wan\u2019t the heading to appear on top again.. Simply go the the heading widget\u2019s advanced tab and adjust the z-index value. I\u2019ll set it to 2.. It will appear on top because it\u2019s the largest value of the two. (pun intended)<br \/>Okay we\u2019re almost done here! All I\u2019ll do to complete the design,.. is increase the font size [140px]\u2026 \u2026&#8230;and align the button to the center.<\/p><p>Okay.. let\u2019s complete the design! I\u2019ll increase the font size a bit\u2026\u2026\u2026 and align the button to the center. And that\u2019s it!<\/p><p><br \/>Well that\u2019s it!<\/p><p>Now you know what margins and paddings are,.. and how they affect elements on your site. Use them together with other Elementor settings such as vertical alignment, negative margins and the z-index to create your own stunning designs, just like the ones you see here.<\/p><p>Like always, have fun building and don\u2019t forget to subscribe to our YouTube channel for more tips and tutorials!<\/p><p>Ciao for now!<\/p><p>\u00a0<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Margin and padding are used to create space between elements, and directly impact the layout as well as the look and feel of your site. It\u2019s important to know what these 2 properties do and how they affect your design. In this tutorial we\u2019ll cover: \u2714\ufe0e The difference between margin and padding [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3987,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1704","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Margin and Padding Basics - Academy<\/title>\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\/academy\/margin-and-padding-basics-in-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Margin and Padding Basics - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Margin and padding are used to create space between elements, and directly impact the layout as well as the look and feel of your site. It\u2019s important to know what these 2 properties do and how they affect your design. In this tutorial we\u2019ll cover: \u2714\ufe0e The difference between margin and padding [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T10:12:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:37:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Margin-and-Padding-Basics-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1082\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Margin and Padding Basics - Academy","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\/academy\/margin-and-padding-basics-in-elementor\/","og_locale":"en_US","og_type":"article","og_title":"Margin and Padding Basics - Academy","og_description":"Overview Transcript Overview Margin and padding are used to create space between elements, and directly impact the layout as well as the look and feel of your site. It\u2019s important to know what these 2 properties do and how they affect your design. In this tutorial we\u2019ll cover: \u2714\ufe0e The difference between margin and padding [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-20T10:12:35+00:00","article_modified_time":"2023-02-22T09:37:03+00:00","og_image":[{"width":1920,"height":1082,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Margin-and-Padding-Basics-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Margin and Padding Basics","datePublished":"2021-06-20T10:12:35+00:00","dateModified":"2023-02-22T09:37:03+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/"},"wordCount":2350,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Margin-and-Padding-Basics-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/","url":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/","name":"Margin and Padding Basics - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Margin-and-Padding-Basics-1.jpg","datePublished":"2021-06-20T10:12:35+00:00","dateModified":"2023-02-22T09:37:03+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Margin-and-Padding-Basics-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Margin-and-Padding-Basics-1.jpg","width":1920,"height":1082},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Margin and Padding Basics"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1704"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1704\/revisions"}],"predecessor-version":[{"id":9578,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1704\/revisions\/9578"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/3987"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}