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)
  • Buttons


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

Share this: