Margins

We provide you with following margin shortnames that need to be known to use our margin system.

Margin shortnames

shortname	value
5xs	0px
4xs	2px
3xs	4px
2xs	8px
xs	12px
s	16px
m	24px
2m	32px
3m	40px
4m	48px
l	56px
xl	64px
2xl	72px
3xl	80px
4xl	88px
5xl	96px

Margin directions

direction value
top
right
bottom
left

Using

To configure a margin class, you need to combine the classname with the direction value and the margin shortname. To specify different directions for different margin sizes, just specify multiple combinations with the same definition.

(classname)-(direction value)-(margin shortname)	description
nxt-margin-top-2xs	direction top what means margin-top and margin shortname 2xs what is 8px.
nxt-margin-bottom-s	direction bottom what means margin-bottom and margin shortname s what is 16px.

Example

Container with 16px margin top.

Container with 16px margin right.

Container with 16px margin bottom.

Container with 16px margin left.

<div class="wrapper">
  <div class="nxt-margin-top-s margin-box">Container with 16px margin top.</div>
</div>

<br />

<div class="wrapper">
  <div class="nxt-margin-right-s margin-box">Container with 16px margin right.</div>
</div>

<br />

<div class="wrapper">
  <div class="nxt-margin-bottom-s margin-box">Container with 16px margin bottom.</div>
</div>

<br />

<div class="wrapper">
  <div class="nxt-margin-left-s margin-box">Container with 16px margin left.</div>
</div>