---
title: Whitespace
layout: component.html
---
<h1 class="docs--page-header">
    Whitespace
</h1>
<p class="docs--page-description">
    Almost any component requires some whitespace either inside itself, or around it. We added a bunch of helper classes to keep spacing consistent.
</p>

<h2 class="docs--section-header">Padding</h2>
<p class="docs--section-description">
    Give containers some space on the inside.
</p>
<table class="docs--section-guide table">
    <thead>
        <tr>
            <th>Class</th>
            <th>Result</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>.padding-[xs, sm, lg, xl]</code></td>
            <td>Adds padding on all sides</td>
        </tr>
        <tr>
            <td><code>.padding-vertical-[xs, sm, lg, xl]</code></td>
            <td>Adds padding on top and bottom sides</td>
        </tr>
        <tr>
            <td><code>.padding-horizontal-[xs, sm, lg, xl]</code></td>
            <td>Adds padding on left and right sides</td>
        </tr>
        <tr>
            <td><code>.padding-[top, right, bottom, left]-[xs, sm, lg, xl]</code></td>
            <td>Adds padding on the specified side only</td>
        </tr>
    </tbody>
</table>

<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
<div class="docs--example-container demo docs--whitespace-green docs--prism" data-xrayhtml><div class="padding-xs">
    <div>Extra small padding</div>
</div></div>
</div>
<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
<div class="docs--example-container demo docs--whitespace-green docs--prism" data-xrayhtml><div class="padding-sm">
    <div>Small padding</div>
</div></div>
</div>
<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
<div class="docs--example-container demo docs--whitespace-green docs--prism" data-xrayhtml><div class="padding">
    <div>Padding</div>
</div></div>
</div>
<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
<div class="docs--example-container demo docs--whitespace-green docs--prism" data-xrayhtml><div class="padding-lg">
    <div>Large padding</div>
</div></div>
</div>
<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
<div class="docs--example-container demo docs--whitespace-green docs--prism" data-xrayhtml><div class="padding-xl">
    <div>Extra large padding</div>
</div></div>
</div>

<h2 class="docs--section-header">Margin</h2>
<p class="docs--section-description">
    Give containers some space on the outside.
</p>
<table class="docs--section-guide table">
    <thead>
        <tr>
            <th>Class</th>
            <th>Result</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>.margin-[xs, sm, lg, xl]</code></td>
            <td>Adds margin on all sides</td>
        </tr>
        <tr>
            <td><code>.margin-vertical-[xs, sm, lg, xl]</code></td>
            <td>Adds margin on top and bottom sides</td>
        </tr>
        <tr>
            <td><code>.margin-horizontal-[xs, sm, lg, xl]</code></td>
            <td>Adds margin on left and right sides</td>
        </tr>
        <tr>
            <td><code>.margin-[top, right, bottom, left]-[xs, sm, lg, xl]</code></td>
            <td>Adds margin on the specified side only</td>
        </tr>
    </tbody>
</table>

<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
<div class="docs--example-container demo docs--whitespace-orange docs--prism" data-xrayhtml><div class="margin-xs">
    <div>Extra small margin</div>
</div></div>
</div>
<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
<div class="docs--example-container demo docs--whitespace-orange docs--prism" data-xrayhtml><div class="margin-sm">
    <div>Small margin</div>
</div></div>
</div>
<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
<div class="docs--example-container demo docs--whitespace-orange docs--prism" data-xrayhtml><div class="margin">
    <div>Margin</div>
</div></div>
</div>
<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
<div class="docs--example-container demo docs--whitespace-orange docs--prism" data-xrayhtml><div class="margin-lg">
    <div>Large margin</div>
</div></div>
</div>
<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
<div class="docs--example-container demo docs--whitespace-orange docs--prism" data-xrayhtml><div class="margin-xl">
    <div>Extra large margin</div>
</div></div>
</div>