Download Github
English

Spacing

Utility that serves to give the element spaced through the margins (margin) and paddings (paddings).

In unkuna the following notations are used to create margins and paddings on the sides of the element, in different sizes.

Unkuna uses the following notation:

Property:

Prefix Description
m Margin abbreviation
p Padding abbreviation

Sides:

Prefix Description
r Abbreviation for right side.
l Abbreviation for left side.
t Abbreviation for top side.
b Abbreviation for bottom side.
x Abbreviation for the sides of the x-axis (left and right).
y Abbreviation for the sides of the y-axis (top and bottom).

Size:

Prefix Description
small Assign a size of 0.5rem for the margin or padding, as used.
medium Assign a size of 1rem for the margin or padding, as used.
large Assign a size of 1.5rem for the margin or padding, as used.

Margins

Use

  1. You must combine the prefixes explained above according to the need of your design.
    <div class="nkn-mr-medium"> </div>
    Where:
    m: Margin
    r: side (right)
    medium: Size of 1 rem

Small margin example

HTML Snippet

Average margin example

HTML Snippet

Large margin example

HTML Snippet

Padding

Use

  1. You must combine the prefixes explained above according to the need of your design.
    <div class="nkn-px-large"> </div>
    Where:
    p: Padding
    x: Axis x (right and left sides)
    large: 1.5 rem size

Small padding example

HTML Snippet

Medium padding example

HTML Snippet

Large padding example

HTML Snippet