スペーシング — margin・padding・サイズの指定

<!-- 四辺すべて -->
<div class="p-4">...</div>
 
<!-- 上下・左右 -->
<div class="py-2 px-4">...</div>
 
<!-- 個別 -->
<div class="pt-4 pr-6 pb-4 pl-6">...</div>
 
<!-- 左右のみ（水平方向） -->
<div class="px-6">...</div>
 
<!-- 上下のみ（垂直方向） -->
<div class="py-3">...</div>

<!-- 中央揃え（水平） -->
<div class="mx-auto w-full max-w-xl">...</div>
 
<!-- 上に余白 -->
<p class="mt-4">...</p>
 
<!-- 下に余白 -->
<h2 class="mb-2">...</h2>
 
<!-- 負のmargin -->
<div class="-mt-2">...</div>

<!-- 固定幅 -->
<div class="w-32">128px</div>    <!-- 8rem -->
<div class="w-64">256px</div>    <!-- 16rem -->
 
<!-- パーセント -->
<div class="w-1/2">50%</div>
<div class="w-full">100%</div>
 
<!-- ビューポート -->
<div class="w-screen h-screen">画面全体</div>
 
<!-- 最大・最小 -->
<div class="max-w-sm">最大384px</div>
<div class="max-w-prose">最大65ch（読みやすい本文幅）</div>
<div class="min-h-screen">最低でも画面の高さ</div>

<div class="w-[480px] h-[360px]">...</div>
<div class="mt-[72px]">...</div>
<div class="p-[clamp(1rem,3vw,2rem)]">...</div>