Spacing
Extended from bootstrap spacing
Each spacing class is named for the percentage of the base size (16px) that generates the associated pixel value.
For example, 32px is 200% of 16px, so the classes are named p-200 m-200.
- Example
- 0
- Name
p-0 m-0
- Size
- 0px
- Multiplier
- 0rem
- Example
- 4
- Name
p-25 m-25
- Size
- 4px
- Multiplier
- 0.25rem
- Example
- 8
- Name
p-50 m-50
- Size
- 8px
- Multiplier
- 0.5rem
- Example
- 16
- Name
p-100 m-100
- Size
- 16px
- Multiplier
- 1rem
- Example
- 24
- Name
p-150 m-150
- Size
- 24px
- Multiplier
- 1.5rem
- Example
- 32
- Name
p-200 m-200
- Size
- 32px
- Multiplier
- 2rem
- Example
- 48
- Name
p-300 m-300
- Size
- 48px
- Multiplier
- 3rem
- Example
- 64
- Name
p-400 m-400
- Size
- 64px
- Multiplier
- 4rem
- Example
- 80
- Name
p-500 m-500
- Size
- 80px
- Multiplier
- 5rem
- Example
- 96
- Name
p-600 m-600
- Size
- 96px
- Multiplier
- 6rem
- Example
- 128
- Name
p-800 m-800
- Size
- 128px
- Multiplier
- 8rem
The following class names remain for backward compatibility but should not be used. Please refactor any code that does use them, as they will be removed in a future version of ESDS.
- Old name
p-1 m-1
- New name
p-25 m-25
- Size
- 4px
- Multiplier
- 0.25rem
- Old name
p-2 m-2
- New name
p-50 m-50
- Size
- 8px
- Multiplier
- 0.5rem
- Old name
p-3 m-3
- New name
p-100 m-100
- Size
- 16px
- Multiplier
- 1rem
- Old name
p-4 m-4
- New name
p-200 m-200
- Size
- 32px
- Multiplier
- 2rem
- Old name
p-5 m-5
- New name
- n/a
- Size
- 72px
- Multiplier
- 4.5rem
- Old name
p-450 m-450
- New name
- n/a
- Size
- 72px
- Multiplier
- 4.5rem
- Old name
p-6 m-6
- New name
p-800 m-800
- Size
- 128px
- Multiplier
- 8rem