mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
40 lines
2.4 KiB
PHP
40 lines
2.4 KiB
PHP
@extends('_layouts.master', ['title' => 'Spacing'])
|
|
|
|
@section('body')
|
|
|
|
<h1 class="title">Spacing</h1>
|
|
|
|
<p class="mt-6 mb-3">The syntax below is combined to create a system for padding and margins. For example, <code>.pt-2</code> would add padding to the top of the element to the value of <code>0.5rem</code> and <code>.my-0</code> would make the horizontal margin zero.</p>
|
|
|
|
<div class="flex mt-6">
|
|
<div class="pr-7">
|
|
<div class="mb-2 text-dark-softer text-uppercase text-xs">Class</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">p</code></div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">m</code></div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">pull</code></div>
|
|
</div>
|
|
<div class="pr-7">
|
|
<div class="mb-2 text-dark-softer text-uppercase text-xs">Position</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">l</code> Left</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">r</code> Right</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">b</code> Bottom</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">t</code> Top</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">v</code> Vertical</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">h</code> Horizontal</div>
|
|
</div>
|
|
<div>
|
|
<div class="mb-2 text-dark-softer text-uppercase text-xs">Space</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">0</code> 0</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">1</code> 0.25rem</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">2</code> 0.5rem</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">3</code> 0.75rem</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">4</code> 1rem</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">5</code> 1.5rem</div>
|
|
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">6</code> 2rem</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
@endsection
|