Teutonic CSS

Padding

←

Here is a little bit of extra padding. Use padding to move the contents away from the edges of the block.

Use the padding helpers in combination with any block element, especially with .box, .button and form elemets. When no padding class is given, the default value for interface elements is mostly --space-s.

Syntax: .p{-direction?}{_size?}

SCSS: _padding.scss

All

pa_xs

pa_s

pa_m

pa_l

Top

pa-t_xs

pa-t_s

pa-t_m

pa-t_l

Right

pa-r_xs

pa-r_s

pa-r_m

pa-r_l

Bottom

pa-b_xs

pa-b_s

pa-b_m

pa-b_l

Left

pa-l_xs

pa-l_s

pa-l_m

pa-l_l

Vertical

pa-v_xs

pa-v_s

pa-v_m

pa-v_l

Horizontal

pa-h_xs

pa-h_s

pa-h_m

pa-h_l

<div class="docs-padding-helper">
  <h3 class="ma-t_l">All</h3>
  <div class="bg-0 ma-v_xs pa_xs"><div class="box text-clip text-mono bg-b">pa_xs</div></div>
  <div class="bg-0 ma-v_xs pa_s"><div class="box text-clip text-mono bg-c">pa_s</div></div>
  <div class="bg-0 ma-v_xs pa_m"><div class="box text-clip text-mono bg-d">pa_m</div></div>
  <div class="bg-0 ma-v_xs pa_l"><div class="box text-clip text-mono bg-e">pa_l</div></div>
  <h3 class="ma-t_l">Top</h3>
  <div class="bg-0 ma-v_xs pa-t_xs"><div class="box text-clip text-mono bg-b">pa-t_xs</div></div>
  <div class="bg-0 ma-v_xs pa-t_s"><div class="box text-clip text-mono bg-c">pa-t_s</div></div>
  <div class="bg-0 ma-v_xs pa-t_m"><div class="box text-clip text-mono bg-d">pa-t_m</div></div>
  <div class="bg-0 ma-v_xs pa-t_l"><div class="box text-clip text-mono bg-e">pa-t_l</div></div>
  <h3 class="ma-t_l">Right</h3>
  <div class="bg-0 ma-v_xs pa-r_xs"><div class="box text-clip text-mono bg-b">pa-r_xs</div></div>
  <div class="bg-0 ma-v_xs pa-r_s"><div class="box text-clip text-mono bg-c">pa-r_s</div></div>
  <div class="bg-0 ma-v_xs pa-r_m"><div class="box text-clip text-mono bg-d">pa-r_m</div></div>
  <div class="bg-0 ma-v_xs pa-r_l"><div class="box text-clip text-mono bg-e">pa-r_l</div></div>
  <h3 class="ma-t_l">Bottom</h3>
  <div class="bg-0 ma-v_xs pa-b_xs"><div class="box text-clip text-mono bg-b">pa-b_xs</div></div>
  <div class="bg-0 ma-v_xs pa-b_s"><div class="box text-clip text-mono bg-c">pa-b_s</div></div>
  <div class="bg-0 ma-v_xs pa-b_m"><div class="box text-clip text-mono bg-d">pa-b_m</div></div>
  <div class="bg-0 ma-v_xs pa-b_l"><div class="box text-clip text-mono bg-e">pa-b_l</div></div>
  <h3 class="ma-t_l">Left</h3>
  <div class="bg-0 ma-v_xs pa-l_xs"><div class="box text-clip text-mono bg-b">pa-l_xs</div></div>
  <div class="bg-0 ma-v_xs pa-l_s"><div class="box text-clip text-mono bg-c">pa-l_s</div></div>
  <div class="bg-0 ma-v_xs pa-l_m"><div class="box text-clip text-mono bg-d">pa-l_m</div></div>
  <div class="bg-0 ma-v_xs pa-l_l"><div class="box text-clip text-mono bg-e">pa-l_l</div></div>
  <h3 class="ma-t_l">Vertical</h3>
  <div class="bg-0 ma-v_xs pa-v_xs"><div class="box text-clip text-mono bg-b">pa-v_xs</div></div>
  <div class="bg-0 ma-v_xs pa-v_s"><div class="box text-clip text-mono bg-c">pa-v_s</div></div>
  <div class="bg-0 ma-v_xs pa-v_m"><div class="box text-clip text-mono bg-d">pa-v_m</div></div>
  <div class="bg-0 ma-v_xs pa-v_l"><div class="box text-clip text-mono bg-e">pa-v_l</div></div>
  <h3 class="ma-t_l">Horizontal</h3>
  <div class="bg-0 ma-v_xs pa-h_xs"><div class="box text-clip text-mono bg-b">pa-h_xs</div></div>
  <div class="bg-0 ma-v_xs pa-h_s"><div class="box text-clip text-mono bg-c">pa-h_s</div></div>
  <div class="bg-0 ma-v_xs pa-h_m"><div class="box text-clip text-mono bg-d">pa-h_m</div></div>
  <div class="bg-0 ma-v_xs pa-h_l"><div class="box text-clip text-mono bg-e">pa-h_l</div></div>
</div>
<style>
  .docs-padding-helper > div {  border: 1px solid transparent; } /* avoid margin collaspe */
</style>