{"id":2358,"date":"2023-02-09T16:30:34","date_gmt":"2023-02-09T16:30:34","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/margins-vs-padding-best-practices\/"},"modified":"2024-04-05T17:35:26","modified_gmt":"2024-04-05T17:35:26","slug":"margins-vs-padding-best-practices","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/margins-vs-padding-best-practices\/","title":{"rendered":"Margins vs. Padding &#8211; Best Practices"},"content":{"rendered":"<p>Margins and padding serve similar purposes to adjust spacing when designing and setting up the layout of a page. To highlight the difference at a basic level,\u00a0<strong>margins<\/strong>\u00a0add space\u00a0<em>around\u00a0<\/em>an element, and\u00a0<strong>padding<\/strong>\u00a0applies spacing\u00a0<em>within<\/em>\u00a0the area of a selected element.<\/p>\n<p>Designers from Ion\u2019s creative services team put together notes and recommendations on when best to use margins and when to use padding:<\/p>\n<h3><strong>Rows:<\/strong><\/h3>\n<ul>\n<li>When a row needs spacing above and below for all of the content in it, we use a Row Padding Micro-Theme. The micro-theme makes it easy to apply a standard amount of padding between rows.<\/li>\n<li>In scenarios when a row has multiple columns that will stack vertically in the Extra Small (XS) view and you want space between, do not put padding on the row &#8212; instead apply padding to the columns.<\/li>\n<\/ul>\n<h3><strong>Columns<\/strong><\/h3>\n<ul>\n<li>Use padding to add space within a column. Avoid applying margins to a column as it can impact the structure of a responsive grid.<\/li>\n<li>When a container sits inside of a column, we typically add bottom margin to the container, to add more spacing when content stacks vertically in the XS view.<\/li>\n<\/ul>\n<h3><strong>Text Elements, Container Elements, Image Elements<\/strong><\/h3>\n<ul>\n<li>Bottom Margins first and foremost \u2014 by adding bottom margins, we create additional space between elements and helps to create a consistent design process when building different experiences.<\/li>\n<li>As it relates to creating spacing around text, container, and image elements we use margins before padding.<\/li>\n<\/ul>\n<h3><strong>Platform Components (Tabs, Accordions, Flow, Reveal \u2014 on actual component, not within)<\/strong><\/h3>\n<ul>\n<li>Use margins to add space around an\u00a0<em>entire<\/em>\u00a0interactive component.<\/li>\n<li>Do not use padding, as it can impact positioning of interior elements and sections within the interactive component.<\/li>\n<li><strong>Tip for publishing within interior sections of an interactive component:\u00a0<\/strong>Add a container inside each interior element. The container helps to group content and you can apply margins\/padding to adjust layout and spacing without impacting the innate functionality of the interactive component.<\/li>\n<\/ul>\n<h3><strong>Buttons<\/strong><\/h3>\n<ul>\n<li>Use margins to add space around a button. Do not use padding, as it effects the button styling.<\/li>\n<\/ul>\n<h3>To summarize, you can add:<\/h3>\n<h4><strong>Margins<\/strong><\/h4>\n<ul>\n<li>Text, Image, and Container Elements<\/li>\n<li>Entire platform components (accordion, tabs, flow \u2014 not the sections)<\/li>\n<li>Buttons<\/li>\n<\/ul>\n<h4><strong>Padding<\/strong><\/h4>\n<ul>\n<li>Rows<\/li>\n<li>Columns<\/li>\n<li>Sections of a page<\/li>\n<li>Within\u00a0<em>sections<\/em>\u00a0of an interactive component (such as flow steps, sections of tabs or accordions \u2014 not for the entire component)<\/li>\n<\/ul>\n<hr \/>\n<p data-pm-slice=\"1 1 [&quot;bullet_list&quot;,{},&quot;list_item&quot;,{}]\">If you have any questions, please contact us on <a href=\"mailto:help@ioninteractive.com\" rel=\"noopener noreferrer nofollow\">help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Margins and padding serve similar purposes to adjust spacing when designing and setting up the layout of a page. To highlight the difference at a basic level,\u00a0margins\u00a0add space\u00a0around\u00a0an element, and\u00a0padding\u00a0applies spacing\u00a0within\u00a0the area of a [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":5312,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[986,32],"tags":[2153,2154,2141],"class_list":["post-2358","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-containers-en","category-the-creative-studio","tag-column","tag-containers","tag-layout"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2358"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2358\/revisions"}],"predecessor-version":[{"id":6332,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2358\/revisions\/6332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5312"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}