Spacing
A four-pixel grid, the same in both HTML stacks
Scale
Tailwind’s numbers; the Bootstrap build uses the same steps.
p-14pxp-28pxp-312pxp-416pxp-520pxp-624pxp-832pxp-1040pxp-1248pxp-1664pxp-2080pxCode
<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-2</code><span class="space-bar" style="width: 8px"></span><small class="muted">8px</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-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>
<div class="space-row"><code>p-12</code><span class="space-bar" style="width: 48px"></span><small class="muted">48px</small></div>
<div class="space-row"><code>p-16</code><span class="space-bar" style="width: 64px"></span><small class="muted">64px</small></div>
<div class="space-row"><code>p-20</code><span class="space-bar" style="width: 80px"></span><small class="muted">80px</small></div>