H8K Design Library

Source: lib/spacing.scss, line 2

4 Spacing

Classes to apply spacing (Margin and Padding) Format - m{direction}-{value} | p{direction}-{value} | w

Valid values for space amounts: -> 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 25, 30, 35, 40, 45, 50, 75, 100, auto

Example

Valid values for direction: -> top : t -> bottom : b -> left : l -> right : r -> x : left,right -> y : top,bottom -> a : all ( left,right, top,bottom)

Valid values for direction:
-> top : t
-> bottom : b
-> left : l
-> right : r
-> x : left,right
-> y : top,bottom
-> a : all ( left,right, top,bottom)

Source: lib/spacing.scss, line 84

4.1 Margins

Use margin classes using m{direction}-{value}

Example

Margin Left 9px, Margin Bottom 6px

Margin Horizontal Auto

 <div class="mb-6 ml-9">Margin Left 9px, Margin Bottom 6px</div>
 <div class="mx-auto w-50">Margin Horizontal Auto</div>

Source: lib/spacing.scss, line 95

4.2 Padding

Use padding classes using p{direction}-{value}

Example

Padding Top 1px

Padding 30px

 <div class="pt-5">Padding Top 1px</div>
 <div class="pa-30">Padding 30px</div>