Spacing
Steps on a two-pixel grid, the same in both HTML stacks
Scale
Tailwind’s numbers, half steps included; the Bootstrap build uses the same steps.
p-0.52pxp-14pxp-1.56pxp-28pxp-2.510pxp-312pxp-3.514pxp-416pxp-520pxp-624pxp-832pxp-1040pxCode
<div class="space-row"><code>p-0.5</code><span class="space-bar" style="width: 2px"></span><small class="muted">2px</small></div>
<div class="space-row"><code>p-1</code><span class="space-bar" style="width: 4px"></span><small class="muted">4px</small></div>
<div class="space-row"><code>p-1.5</code><span class="space-bar" style="width: 6px"></span><small class="muted">6px</small></div>
<div class="space-row"><code>p-2</code><span class="space-bar" style="width: 8px"></span><small class="muted">8px</small></div>
<div class="space-row"><code>p-2.5</code><span class="space-bar" style="width: 10px"></span><small class="muted">10px</small></div>
<div class="space-row"><code>p-3</code><span class="space-bar" style="width: 12px"></span><small class="muted">12px</small></div>
<div class="space-row"><code>p-3.5</code><span class="space-bar" style="width: 14px"></span><small class="muted">14px</small></div>
<div class="space-row"><code>p-4</code><span class="space-bar" style="width: 16px"></span><small class="muted">16px</small></div>
<div class="space-row"><code>p-5</code><span class="space-bar" style="width: 20px"></span><small class="muted">20px</small></div>
<div class="space-row"><code>p-6</code><span class="space-bar" style="width: 24px"></span><small class="muted">24px</small></div>
<div class="space-row"><code>p-8</code><span class="space-bar" style="width: 32px"></span><small class="muted">32px</small></div>
<div class="space-row"><code>p-10</code><span class="space-bar" style="width: 40px"></span><small class="muted">40px</small></div>