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)