Spacing

Phenix includes a wide range of shorthand responsive margins, padding, and utility classes to modify an element’s appearance.

Padding Utility

phenix provides a range of shorthand responsive padding classes you can set a padding for individual properties, all properties, and vertical and horizontal properties with a responsive breakpoint to begin with like any other responsive utilities you add -{breakpoint} after the utility prefix for example .pd-md-* to add padding to the element for the size of the medium screen and up,

in the table below you can learn the pattern for each class name and its available values.

Class name	Description	Markup
`.pd-*`	adds padding for all directions.	`<any>`
`.pdx-*`	add padding horizontally.	`<any>`
`.pdy-*`	add padding vertically.	`<any>`
`.pdt-*`	add padding-top.	`<any>`
`.pdb-*`	add padding-bottom.	`<any>`
`.pds-*`	add padding start [ltr=left], [rtl=right].	`<any>`
`.pde-*`	add padding end [ltr=left], [rtl=right].	`<any>`
`**-5`	adding value equal to `5px` padding classes.	`<any>`
`**-10`	adding value equal to `10px` padding classes.	`<any>`
`**-15`	adding value equal to `15px` padding classes.	`<any>`
`**-20`	adding value equal to `20px` padding classes.	`<any>`
`**-25`	adding value equal to `25px` padding classes.	`<any>`
`**-30`	adding value equal to `30px` padding classes.	`<any>`
`**-40`	adding value equal to `40px` padding classes.	`<any>`
`**-50`	adding value equal to `50px` padding classes.	`<any>`
`**-75`	adding value equal to `75px` padding classes.	`<any>`
`**-100`	adding value equal to `100px` padding classes.	`<any>`

Note: all values of px are transformed to REM instead of the base of 16px.

Responsive Pattern	Description	Breakpoints
`.pd-{breakpoint}-*`	add padding for all directions.	`md, lg, xl`
`.pdx-{breakpoint}-*`	add padding horizontally.	`md, lg, xl`
`.pdt-{breakpoint}-*`	add padding vertically.	`md, lg, xl`
`.pdt-{breakpoint}-*`	add padding-top.	`md, lg, xl`
`.pdb-{breakpoint}-*`	add padding-bottom.	`md, lg, xl`
`.pds-{breakpoint}-*`	add padding start [ltr=left], [rtl=right].	`md, lg, xl`
`.pde-{breakpoint}-*`	add padding end [ltr=left], [rtl=right].	`md, lg, xl`

Note : ( —— ) refer to the same value as the column before.

Margin Utilities

phenix provide a range of shorthand responsive margin classes you can set a margin for individual properties, all properties, and vertical and horizontal properties with a responsive breakpoint to begin with like any other responsive utilities you add -{breakpoint} after the utility prefix for example .mg-md-* to add a margin to the element for the size of the medium screen and up,