Tailwind CSS で余白（Margin や Padding）を指定する方法

今回の記事では、Tailwind CSS における余白（Margin や Padding）の指定方法を解説します。

Margin の指定方法

基本的には、m{t|r|b|l}-{サイズを表す数値} というふうに指定します。t、r、b、l はそれぞれ top、right、bottom、left の頭文字となっています。水平方向の margin を指定したい場合は mx-{サイズを表す数値} とし、垂直方向の margin を指定したい場合は my-{サイズを表す数値} とします。

例えば、ml-0 から ml-3 を指定すると、左側のマージンはそれぞれ 0, 0.25 rem (4px), 0.5 rem (8px), 0.75 rem (12px) となります。

See the Pen Margin（Tailwind CSS） by Shigotoron@GitHub (@s31104989) on CodePen.

また、要素を水平方向中央に配置したい場合、mx-auto を指定するのが便利です。これにより、
margin-left: auto;
margin-right: auto;
と指定したのと同じ効果が得られるからです。

See the Pen Untitled by Shigotoron@GitHub (@s31104989) on CodePen.

なお、margin を px（ピクセル）や rem で指定したい場合は、m{t|r|b|l}-[*px] あるいは m{t|r|b|l}-[*rem] などとすれば良いです。ただし、* には数字が入ります。例えば、m-[10px] を指定すると、

margin: 10px;

となります。mx（水平方向の margin）や my（垂直方向の margin）についても同様です。

Margin についてより詳しくは
https://tailwindcss.com/docs/margin
を参照して下さい。

Padding の指定方法

基本的には、p{t|r|b|l}-{サイズを表す数値} とすれば良いです。こちらについても、t、r、b、l はそれぞれ top、right、bottom、left の頭文字となっています。水平方向の padding を指定したい場合は px-{サイズを表す数値} とし、垂直方向の padding を指定したい場合は py-{サイズを表す数値} とします。

次の例では、4 つの div 要素それぞれに pt-1, pr-2, pb-3, pl-4 を指定しています。赤い部分が padding となっています。

See the Pen Untitled by Shigotoron@GitHub (@s31104989) on CodePen.

なお、padding を px（ピクセル）や rem で指定したい場合は、margin の場合と同様、m{t|r|b|l}-[*px] あるいは m{t|r|b|l}-[*rem] などとすれば良いです。ただし、* には数字が入ります。例えば、p-[20px] と指定すると、

padding: 20px;

となります。px（水平方向の padding）や py（垂直方向の padding）などについても同様です。

Padding についてより詳しくは
https://tailwindcss.com/docs/padding
を参照して下さい。