Padding Complete
Padding utility for adjusting spacing on-the-fly
Usage
Use the padding utility to specify up to 4 directions of padding on an element.
If you are frequently repeating a pattern using the padding utility, consider moving the padding rule into the component class.
| Class Name | Description |
|---|---|
p-{zero,xs,sm,md,lg,xl}
|
apply a overall padding of size {zero,xs,sm,md,lg,xl}. |
p-top-{zero,xs,sm,md,lg,xl}
|
apply a top padding of size {zero,xs,sm,md,lg,xl}. |
p-bottom-{zero,xs,sm,md,lg,xl}
|
apply a bottom padding of size {zero,xs,sm,md,lg,xl}. |
p-right-{zero,xs,sm,md,lg,xl}
|
apply a right padding of size {zero,xs,sm,md,lg,xl}. |
p-left-{zero,xs,sm,md,lg,xl}
|
apply a left padding of size {zero,xs,sm,md,lg,xl}. |
px-{zero,xs,sm,md,lg,xl}
|
apply a left and right padding of size {zero,xs,sm,md,lg,xl}. |
py-{zero,xs,sm,md,lg,xl}
|
apply a top and bottom padding of size {zero,xs,sm,md,lg,xl}. |