Spacings

Options for Paddings and Margins

Directions	Sizes
"x" (left and right)	"reset": 0px
"y" (top and bottom)	"xxs": 4px
"l" (left)	"xs": 8px
"r" (right)	"s": 16px
"t" (top)	"m": 24px
"b" (bottom)	"l": 32px
"" (all sides) / for usage in mixins: "all"	"xl": 48px
	"xxl": 64px
	"xxxl": 96px

Classes for Margin/Padding

TIP

Direction is optional (empty = all sides). For example: m-xxl = margin "XXL" on all four sides.

.m-[direction] * - [ size ]

.p-[direction] * - [ size ]

Example

m-r-xxl

p-xl

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

m-l-s m-t-m

hide code

<div class="h-flex h-flex-row">
    <div class="h-highlight-block -dark m-r-xxl">
        <p>m-r-xxl</p>
    </div>    
    <div class="h-highlight-block p-xl">
        <h2>p-xl</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>    
    <div class="h-highlight-block -dark m-l-s m-t-xl">
        <p>m-l-s m-t-m</p>
    </div>
</div>

Negative Margin Classes

Examples:

• .-m-l-xs negative margin-left with value "$space-xs"
• .-m-r-l negative margin-right with value "$space-l"
• .-m-t-l negative margin-top with value "$space-l"
• .-m-b-xxxs negative margin-bottom with value "$space-xxxs"

Mixins for Margin/Padding

Use Spacing-Mixin in SCSS like this:

@include p([direction], [size]);
@include m([direction], [size]); 

Variables for Spacings

Use Variables in SCSS like in this example:

left: $space-xxl;

Reset Margin or Padding for Print

See general Print Helper Classes.

Absolute Positioning Helper Classes

You can use these helper classes in combination with .h-pos-absolute:

.left-[size]

.right-[size]

.top-[size]

.bottom-[size]