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, margins add space around an element, and padding applies spacing within the area of a selected element.
Designers from ion’s creative services team put together notes and recommendations on when best to use margins and when to use padding:
- 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.
- 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 -- instead apply padding to the columns.
- Use padding to add space within a column. Avoid applying margins to a column as it can impact the structure of a responsive grid.
- 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.
Text Elements, Container Elements, Image Elements
- Bottom Margins first and foremost — by adding bottom margins, we create additional space between elements and helps to create a consistent design process when building different experiences.
- As it relates to creating spacing around text, container, and image elements we use margins before padding.
Platform Components (Tabs, Accordions, Flow, Reveal — on actual component, not within)
- Use margins to add space around an entire interactive component.
- Do not use padding, as it can impact positioning of interior elements and sections within the interactive component.
- Tip for publishing within interior sections of an interactive component: 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.
- Use margins to add space around a button. Do not use padding, as it effects the button styling.
To summarize, you can add:
- Text, Image, and Container Elements
- Entire platform components (accordion, tabs, flow — not the sections)
- Sections of a page
- Within sections of an interactive component (such as flow steps, sections of tabs or accordions — not for the entire component)