# padding

The markup of every demo on <https://kuiper.oeds.it/padding/>, 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 `padding-*` ladder over 13 rungs, `5xs` to `5xl`.

```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="padding background-white-dark text-center"><p class="background-muted">padding</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="padding-collapse background-white-dark text-center"><p class="background-muted">collapse</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="padding-0 background-white-dark text-center"><p class="background-muted">0</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="padding-1 background-white-dark text-center"><p class="background-muted">1</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="padding-2 background-white-dark text-center"><p class="background-muted">2</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="padding-3 background-white-dark text-center"><p class="background-muted">3</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="padding-5xs background-white-dark text-center"><p class="background-muted">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="padding-4xs background-white-dark text-center"><p class="background-muted">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="padding-3xs background-white-dark text-center"><p class="background-muted">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="padding-2xs background-white-dark text-center"><p class="background-muted">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="padding-xs background-white-dark text-center"><p class="background-muted">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="padding-s background-white-dark text-center"><p class="background-muted">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="padding-m background-white-dark text-center"><p class="background-muted">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="padding-l background-white-dark text-center"><p class="background-muted">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="padding-xl background-white-dark text-center"><p class="background-muted">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="padding-2xl background-white-dark text-center"><p class="background-muted">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="padding-3xl background-white-dark text-center"><p class="background-muted">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="padding-4xl background-white-dark text-center"><p class="background-muted">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="padding-5xl background-white-dark text-center"><p class="background-muted">5xl</p></div></div></div>
</div>
```

## remove

Varies: 8 specimens.

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