Margin & Padding

Last updated: 17 days ago

Category: Basic

Margin controls outer spacing while padding handles inner spacing. The _m[-*] utility classes independently configure element margins with support for size and positioning. Similarly, _p[-*] classes i...

Introduction

margin controls outer spacing while padding handles inner spacing. The framework provides a set of spacing classes. Simply using _m class will apply 14px margin, and _p class will apply 14px padding.

The 14px value is based on the body font size (--_fs-body), converted from 1.4rem. When the body font size changes, margin and padding values will adjust accordingly.

Spacing Sizes

Both margin and padding provide the same set of spacing sizes with two naming conventions:

First: Multiples based on _m/_p:

• _m-0/_p-0: 0 spacing
• _m-1/_p-1: 1x spacing (14px)
• _m-2/_p-2: 2x spacing (14px*2)
• _m-3/_p-3: 3x spacing (and so on)
• _m-4/_p-4: 4x spacing
• _m-5/_p-5: 5x spacing
• _m-6/_p-6: 6x spacing
• _m-7/_p-7: 7x spacing
• _m-8/_p-8: 8x spacing
• _m-9/_p-9: 9x spacing
• _m-10/_p-10: 10x spacing

Second: Size-based naming from xxs to xxl:

• _m-xxs/_p-xxs: 4px spacing
• _m-xs/_p-xs: 8px spacing
• _m-sm/_p-sm: 14px spacing
• _m-md/_p-md: 24px spacing
• _m-lg/_p-lg: 32px spacing
• _m-xl/_p-xl: 40px spacing
• _m-xxl/_p-xxl: 48px spacing

Spacing Positions

By default spacing applies to all sides. The framework also provides 6 directional variants:

• _m-s: Left margin
• _m-e: Right margin
• _m-t: Top margin
• _m-b: Bottom margin
• _m-se: Left & right margins
• _m-tb: Top & bottom margins
• _p-s: Left padding
• _p-e: Right padding
• _p-t: Top padding
• _p-b: Bottom padding
• _p-se: Left & right padding
• _p-tb: Top & bottom padding

Margin Related Classes

Different class types can be combined, e.g. _m-xs _m-s means 8px left margin.

Padding Related Classes

Different class types can be combined, e.g. _p-xs _p-s means 8px left padding.