Margins vs. Padding – Best Practices

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:

Rows:

• 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.

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.

Buttons

• Use margins to add space around a button. Do not use padding, as it effects the button styling.

To summarize, you can add:

Margins

• Text, Image, and Container Elements
• Entire platform components (accordion, tabs, flow — not the sections)
• Buttons

Padding

• Rows
• Columns
• Sections of a page
• Within sections of an interactive component (such as flow steps, sections of tabs or accordions — not for the entire component)

If you have any questions, please contact us on [email protected].