Tailwind CSS スペーシング

Tailwind CSS では、スペーシング（Spacing）はレイアウトの重要な構成要素です。

スペーシングとは、要素間の距離のことで、パディング（Padding）、マージン（Margin）、行間（Line-Height）、字間（Letter-Spacing）などが含まれます。

Tailwind CSS は、これらのスペーシングの設定をより簡単かつ直感的にする、よく使われるユーティリティクラスを提供しています。

マージン（Margin）

マージンは、要素と他の要素との間の距離を制御するために使用します。Tailwind は、マージンを設定するための簡潔なユーティリティクラスを提供しています。一般的な形式は次のとおりです。m-{size}、ここでmはマージンを表し、{size}は具体的な値を表します。

m-{size}：4方向のマージンを設定します。
mt-{size}：上のマージン（margin-top）を設定します。
mr-{size}：右のマージン（margin-right）を設定します。
mb-{size}：下のマージン（margin-bottom）を設定します。
ml-{size}：左のマージン（margin-left）を設定します。
mx-{size}：水平方向のマージン（左右のマージン）を設定します。
my-{size}：垂直方向のマージン（上下のマージン）を設定します。

一般的なマージンの値：

m-0：マージンを0に設定します。
m-1 到 m-64：異なるサイズのマージンを設定します。デフォルトはrem単位に基づいて設定されます。
m-px：マージンを1pxに設定します。
m-auto：マージンをautoに設定します。中央揃えによく使用されます。

使用するmt-*、mr-*、mb-*とml-*ユーティリティクラスを使用して、要素の特定の辺のマージンを制御します。

例えば、mt-6は要素の上部に1.5remのマージンを追加し、mr-4は要素の右側に1remのマージンを追加し、mb-8は要素の下部に2remのマージンを追加し、ml-2は要素の左側に0.5remのマージンを追加します。

例

試してみる »

この例では、mt-6は要素の上部のマージンを設定し、mr-4は右側のマージンを設定し、mb-8は下部のマージンを設定し、ml-2は左側のマージンを設定しています。

使用するmx-*ユーティリティを使用して、要素の水平方向のマージンを制御します。

<div class="mx-8 ...">mx-8</div>

使用するmy-*ユーティリティを使用して、要素の垂直方向のマージンを制御します。

<div class="my-8 ...">my-8</div>

使用するm-*ユーティリティを使用して、要素の全辺のマージンを制御します。

<div class="m-8 ...">m-8</div>

パディング（Padding）

パディングは、要素のコンテンツとボーダーとの間の距離を制御するために使用します。

マージンと同様に、Tailwind はパディングに対しても豊富なユーティリティクラスを提供しています。

p-{size}：4方向のパディングを設定します。
pt-{size}：上のパディング（padding-top）を設定します。
pr-{size}：右のパディング（padding-right）を設定します。
pb-{size}：下のパディング（padding-bottom）を設定します。
pl-{size}：左のパディング（padding-left）を設定します。
px-{size}：水平方向のパディング（左右のパディング）を設定します。
py-{size}：垂直方向のパディング（上下のパディング）を設定します。

一般的なパディングの値：

p-0：パディングを0に設定します。
p-1 到 p-64：異なるサイズのパディングを設定します。
p-px：パディングを1pxに設定します。

例

試してみる »

使用するpx-*ユーティリティを使用して、要素の水平方向のパディングを制御します。

<div class="px-8 ...">px-8</div>

使用するpy-*ユーティリティを使用して、要素の垂直方向のパディングを制御します。

<div class="py-8 ...">py-8</div>

使用するp-*ユーティリティを使用して、要素の全辺のパディングを制御します。

<div class="p-8 ...">p-8</div>

使用するps-*とpe-*ユーティリティを使用して、padding-inline-start と padding-inline-end の論理プロパティを設定します。これらのプロパティは、テキストの方向に応じて左側または右側にマッピングされます。

例

試してみる »

行間（Line Height）

行間は、テキストの行間の垂直方向の間隔を制御します。

Tailwind は、行間を調整するための leading-{size} ユーティリティクラスを提供しています。

一般的な行間の値：

leading-none：行間を1に設定します（間隔なし）。
leading-tight：行間をよりコンパクトな値に設定します。
leading-snug, leading-normal, leading-loose：異なる行間の値を提供します。
leading-{size}：指定した単位を使用して、正確な行間を設定します。

例

<p class="leading-tight">これはコンパクトなテキストです。</p>
<p class="leading-loose">これはゆったりとしたテキストです。</p>

試してみる »

字間（Letter Spacing）

字間は、テキストの文字間の水平方向の間隔を制御します。

Tailwind は、字間を調整するために tracking-{size} ユーティリティクラスを使用します。

一般的な字間の値：

tracking-tight：字間を縮めます。
tracking-normal：通常の字間を設定します。
tracking-wide：字間を広げます。
tracking-{size}：指定した単位を使用して字間を設定します。

例

<p class="tracking-tight">コンパクトなテキスト</p>
<p class="tracking-wide">ゆったりとしたテキスト</p>

試してみる »

ギャップ（Gap）

gap は、グリッドレイアウト（Grid）や Flexbox レイアウトにおける要素の間隔を設定するために使用します。

これはすべての子要素の間に間隔を追加し、レイアウト内で一貫した間隔を作成するのに特に適しています。

一般的な gap の値：

gap-0：間隔を0に設定します。
gap-1 到 gap-64：異なる間隔の値を設定します。

例

試してみる »

その他の拡張