# margin

The markup of every demo on <https://kuiper.oeds.it/margin/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## *

Varies: the `margin-*` ladder over 29 rungs, `13xs` to `13xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin background-muted text-center">margin</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-19xs background-muted text-center">19xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-18xs background-muted text-center">18xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-17xs background-muted text-center">17xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-16xs background-muted text-center">16xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-15xs background-muted text-center">15xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-14xs background-muted text-center">14xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-13xs background-muted text-center">13xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-12xs background-muted text-center">12xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-11xs background-muted text-center">11xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-10xs background-muted text-center">10xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-9xs background-muted text-center">9xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-8xs background-muted text-center">8xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-7xs background-muted text-center">7xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-6xs background-muted text-center">6xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-5xs background-muted text-center">5xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-4xs background-muted text-center">4xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-3xs background-muted text-center">3xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-2xs background-muted text-center">2xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-xs background-muted text-center">xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-s background-muted text-center">s</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-m background-muted text-center">m</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-l background-muted text-center">l</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-xl background-muted text-center">xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-2xl background-muted text-center">2xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-3xl background-muted text-center">3xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-4xl background-muted text-center">4xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-5xl background-muted text-center">5xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-6xl background-muted text-center">6xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-7xl background-muted text-center">7xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-8xl background-muted text-center">8xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-9xl background-muted text-center">9xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-10xl background-muted text-center">10xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-11xl background-muted text-center">11xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-12xl background-muted text-center">12xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-13xl background-muted text-center">13xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-14xl background-muted text-center">14xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-15xl background-muted text-center">15xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-16xl background-muted text-center">16xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-17xl background-muted text-center">17xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-18xl background-muted text-center">18xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-19xl background-muted text-center">19xl</p></div></div></div>
</div>
```

## direction

Varies: 4 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="margin-m-top background-muted text-center">m-top</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="margin-m-bottom background-muted text-center">m-bottom</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="margin-m-left background-muted text-center">m-left</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="margin-m-right background-muted text-center">m-right</p></div></div></div>
</div>
```

## auto

Varies: 12 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="width-1-2 margin-auto background-muted text-center">margin-auto</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="width-1-2 margin-auto-left background-muted text-center">margin-auto-left</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="width-1-2 margin-auto-right background-muted text-center">margin-auto-right</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="width-1-2 margin-auto-top background-muted text-center">margin-auto-top</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="width-1-2 margin-auto-bottom background-muted text-center">margin-auto-bottom</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="width-1-2 margin-auto-vertical background-muted text-center">margin-auto-vertical</p></div></div></div>
</div>
```

## remove

Varies: 9 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-m margin-remove background-muted text-center">remove</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-m margin-remove-top background-muted text-center">remove-top</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-m margin-remove-bottom background-muted text-center">remove-bottom</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-m margin-remove-left background-muted text-center">remove-left</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-m margin-remove-right background-muted text-center">remove-right</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-m margin-remove-vertical background-muted text-center">remove-vertical</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark"><p class="background-muted text-center">&nbsp;</p><p class="margin-m margin-remove-adjacent background-muted text-center">remove-adjacent</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark margin-remove-first-child"><p class="margin-m background-muted text-center">remove-first-child</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark margin-remove-last-child"><p class="margin-m background-muted text-center">remove-last-child</p></div></div></div>
</div>
```