Paddings and margins can be applied on a side/axis/global basis using the standard size suffixes.
Additionally, the xxs size is also available for those rare tiny spacing needs.

The examples below have a bordered & padded container, and a regular bordered sub-container.
Using margins would have the same effect, if you ignore margin folding.

.p-xxs

.p-xs

.p-s

.p-m

.p-l

.p-xl

Click to show/hide all classes

'); foreach($spacingSizes as &$spacingSize){echo('p-'.$spacingSize.'');} echo('General padding

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('m-'.$spacingSize.'');} echo('General margin

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('px-'.$spacingSize.'');} echo('Horizontal padding

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('py-'.$spacingSize.'');} echo('Vertical padding

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('mx-'.$spacingSize.'');} echo('Horizontal margin

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('my-'.$spacingSize.'');} echo('Vertical margin

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('pt-'.$spacingSize.'');} echo('Top padding

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('pb-'.$spacingSize.'');} echo('Bottom padding

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('pl-'.$spacingSize.'');} echo('Left padding

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('pr-'.$spacingSize.'');} echo('Right padding

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('mt-'.$spacingSize.'');} echo('Top margin

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('mb-'.$spacingSize.'');} echo('Bottom margin

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('ml-'.$spacingSize.'');} echo('Left margin

'); echo('

'); foreach($spacingSizes as &$spacingSize){echo('mr-'.$spacingSize.'');} echo('Right margin

'); ?>

Spacing