Utilities: Spacing

Padding — all sides

p-0 p-1 p-2 p-3 p-4 p-5 p-6

<div class="lp-d-flex lp-gap-3 lp-flex-wrap lp-items-start">
    <span class="lp-demo-box lp-p-0">p-0</span>
    <span class="lp-demo-box lp-p-1">p-1</span>
    <span class="lp-demo-box lp-p-2">p-2</span>
    <span class="lp-demo-box lp-p-3">p-3</span>
    <span class="lp-demo-box lp-p-4">p-4</span>
    <span class="lp-demo-box lp-p-5">p-5</span>
    <span class="lp-demo-box lp-p-6">p-6</span>
</div>

Padding — directional

pt-4 pr-4 pb-4 pl-4 px-4 py-4

<div class="lp-d-flex lp-gap-3 lp-flex-wrap lp-items-start">
    <span class="lp-demo-box lp-pt-4">pt-4</span>
    <span class="lp-demo-box lp-pr-4">pr-4</span>
    <span class="lp-demo-box lp-pb-4">pb-4</span>
    <span class="lp-demo-box lp-pl-4">pl-4</span>
    <span class="lp-demo-box lp-px-4">px-4</span>
    <span class="lp-demo-box lp-py-4">py-4</span>
</div>

Margin — all sides

m-0

m-2

m-4

m-6

The dashed frames reveal the margin space around each box.

<div class="lp-d-flex lp-flex-wrap lp-items-start">
    <div class="lp-demo-frame lp-p-0"><span class="lp-demo-box lp-demo-box--pill lp-m-0">m-0</span></div>
    <div class="lp-demo-frame lp-p-0"><span class="lp-demo-box lp-demo-box--pill lp-m-2">m-2</span></div>
    <div class="lp-demo-frame lp-p-0"><span class="lp-demo-box lp-demo-box--pill lp-m-4">m-4</span></div>
    <div class="lp-demo-frame lp-p-0"><span class="lp-demo-box lp-demo-box--pill lp-m-6">m-6</span></div>
</div>
<p class="lp-text-xs lp-text-muted lp-mt-2">The dashed frames reveal the margin space around each box.</p>

Margin — directional & auto

mt-5 (24px top)

mx-auto

<div class="lp-demo-frame lp-mb-3">
    <div class="lp-demo-box lp-demo-box--pill lp-mt-5">mt-5 (24px top)</div>
</div>
<div class="lp-demo-frame">
    <div class="lp-demo-box lp-demo-box--pill lp-mx-auto lp-d-block lp-wf-32">mx-auto</div>
</div>

Gap (flex / grid)

Use .lp-gap-{n} on a flex or grid container.

gap-2 (8px)

1234

gap-4 (16px)

1234

gap-6 (32px)

1234

<p class="lp-text-sm lp-text-muted lp-mb-3">Use <code class="lp-text-danger">.lp-gap-{n}</code> on a flex or grid container.</p>
<p class="lp-text-xs lp-text-muted lp-mb-1">gap-2 (8px)</p>
<div class="lp-d-flex lp-gap-2 lp-mb-3"><span class="lp-demo-box lp-demo-box--pill">1</span><span class="lp-demo-box lp-demo-box--pill">2</span><span class="lp-demo-box lp-demo-box--pill">3</span><span class="lp-demo-box lp-demo-box--pill">4</span></div>
<p class="lp-text-xs lp-text-muted lp-mb-1">gap-4 (16px)</p>
<div class="lp-d-flex lp-gap-4 lp-mb-3"><span class="lp-demo-box lp-demo-box--pill">1</span><span class="lp-demo-box lp-demo-box--pill">2</span><span class="lp-demo-box lp-demo-box--pill">3</span><span class="lp-demo-box lp-demo-box--pill">4</span></div>
<p class="lp-text-xs lp-text-muted lp-mb-1">gap-6 (32px)</p>
<div class="lp-d-flex lp-gap-6"><span class="lp-demo-box lp-demo-box--pill">1</span><span class="lp-demo-box lp-demo-box--pill">2</span><span class="lp-demo-box lp-demo-box--pill">3</span><span class="lp-demo-box lp-demo-box--pill">4</span></div>

Space between siblings

Add .lp-space-x-{n} / .lp-space-y-{n} to a parent; spacing is applied between siblings (not before the first child).

ABCD

space-x-3

Row 1

Row 2

Row 3

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-space-x-{n}</code> / <code class="lp-text-danger">.lp-space-y-{n}</code> to a parent; spacing is applied between siblings (not before the first child).</p>
<div class="lp-d-flex lp-space-x-3 lp-mb-3">
    <span class="lp-demo-box lp-demo-box--pill">A</span><span class="lp-demo-box lp-demo-box--pill">B</span><span class="lp-demo-box lp-demo-box--pill">C</span><span class="lp-demo-box lp-demo-box--pill">D</span>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-2">space-x-3</p>
<div class="lp-space-y-3 lp-max-w-xs">
    <div class="lp-demo-box lp-demo-box--pill lp-w-full">Row 1</div>
    <div class="lp-demo-box lp-demo-box--pill lp-w-full">Row 2</div>
    <div class="lp-demo-box lp-demo-box--pill lp-w-full">Row 3</div>
</div>

Divide — borders between siblings

First Second Third

divide-x (1px)

Row one

Row two

Row three

divide-y

<div class="lp-d-flex lp-divide-x lp-mb-3">
    <span class="lp-px-4 lp-py-2">First</span>
    <span class="lp-px-4 lp-py-2">Second</span>
    <span class="lp-px-4 lp-py-2">Third</span>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-3">divide-x (1px)</p>
<div class="lp-divide-y lp-max-w-xs lp-border lp-rounded">
    <div class="lp-px-3 lp-py-2">Row one</div>
    <div class="lp-px-3 lp-py-2">Row two</div>
    <div class="lp-px-3 lp-py-2">Row three</div>
</div>
<p class="lp-text-xs lp-text-muted lp-mt-2">divide-y</p>

CSS Reference

Class	Description
`.lp-m-{0..8}`	Margin all sides
`.lp-mt/mr/mb/ml-{0..8}`	Directional margin
`.lp-mx-{0..8}` / `.lp-my-{0..8}`	Horizontal / vertical margin
`.lp-m-auto` / `.lp-mx-auto`	Auto margin (centering)
`.lp-p-{0..8}`	Padding all sides
`.lp-pt/pr/pb/pl-{0..8}`	Directional padding
`.lp-px-{0..8}` / `.lp-py-{0..8}`	Horizontal / vertical padding
`.lp-gap-{0..8}`	Flex / grid gap
`.lp-gap-x-{0..8}` / `.lp-gap-y-{0..8}`	Axis-specific gap
`.lp-space-x-{0..8}` / `.lp-space-y-{0..8}`	Margin between siblings
`.lp-divide-x` / `.lp-divide-y`	Border between siblings
`.lp-divide-x-{0,2,4}`	Divide width variants
`.lp-divide-{color}`	Divide color (primary, success, danger, etc.)

Spacing Utilities

Padding — all sides

Padding — directional

Margin — all sides

Margin — directional & auto

Gap (flex / grid)

Space between siblings

Divide — borders between siblings

CSS Reference