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