Pelican Design System
Spacing
Spacing
Spacing is the paddings and margins in Pelican.
On this page:
Overview
Spacing is used as Padding and Margin in Pelican.
Padding is the space inside of something, putting space between its edges and its internal contents. Margin is the space around something, putting space between its outer edges and the outer edges of something else.
These two boxes have margins around them and padding inside of them.
There are 4 pixels of padding around this box. It pushes content away from the edges, towards the inside.
There are 16 pixels of margin to the bottom of these sentences. This can also be called “margin-bottom”.
There are 20 pixels of padding around this box. It pushes content away from the edges, towards the inside.
There are 0 pixels of margin to the bottom of these sentences. This can also be called “margin-bottom”.
Padding and Margin Classes
Padding and Margin can be applied to individual sides, to top and bottom at the same, or the left and right at the same time. Padding left and right have been changed to padding start and padding end, based upon the flex direction. Be sure to consult Bootstrap’s Spacing Utilities for additional spacing abilities like responsive spacing and flex direction.
Replace n with any number from 0 to 40. Replacing n with 0 applies zero spacing. Each successive number from 1 to 40 adds a multiple of 4 pixels (based on .25 rem) of space to the previous number (based on Bootstrap’s defined spacer variable).
For example, mb-5 adds 1.25 rem (20 pixels) while mb-6 adds 1.5 rem (24 pixels) of margin at the bottom.
Padding Classes
- Top:
pt-n - Right:
pe-n - Bottom:
pb-n - Left:
ps-n - Top and Bottom:
py-n - Right and Left:
px-n
Margin Classes
- Top:
mt-n - Right:
me-n - Bottom:
mb-n - Left:
ms-n - Top and Bottom:
my-n - Right and Left:
mx-n