🛰
【Tailwind和訳】SPACING/Margin
この記事について
この記事は、SPACING/Marginの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Margin
要素の margin を制御するためのユーティリティーです。
| Class | Properties |
|---|---|
m-0 |
margin: 0px; |
m-px |
margin: 1px; |
m-0.5 |
margin: 0.125rem; |
m-1 |
margin: 0.25rem; |
m-1.5 |
margin: 0.375rem; |
m-2 |
margin: 0.5rem; |
m-2.5 |
margin: 0.625rem; |
m-3 |
margin: 0.75rem; |
m-3.5 |
margin: 0.875rem; |
m-4 |
margin: 1rem; |
m-5 |
margin: 1.25rem; |
m-6 |
margin: 1.5rem; |
m-7 |
margin: 1.75rem; |
m-8 |
margin: 2rem; |
m-9 |
margin: 2.25rem; |
m-10 |
margin: 2.5rem; |
m-11 |
margin: 2.75rem; |
m-12 |
margin: 3rem; |
m-14 |
margin: 3.5rem; |
m-16 |
margin: 4rem; |
m-20 |
margin: 5rem; |
m-24 |
margin: 6rem; |
m-28 |
margin: 7rem; |
m-32 |
margin: 8rem; |
m-36 |
margin: 9rem; |
m-40 |
margin: 10rem; |
m-44 |
margin: 11rem; |
m-48 |
margin: 12rem; |
m-52 |
margin: 13rem; |
m-56 |
margin: 14rem; |
m-60 |
margin: 15rem; |
m-64 |
margin: 16rem; |
m-72 |
margin: 18rem; |
m-80 |
margin: 20rem; |
m-96 |
margin: 24rem; |
m-auto |
margin: auto; |
-m-0 |
margin: 0px; |
-m-px |
margin: -1px; |
-m-0.5 |
margin: -0.125rem; |
-m-1 |
margin: -0.25rem; |
-m-1.5 |
margin: -0.375rem; |
-m-2 |
margin: -0.5rem; |
-m-2.5 |
margin: -0.625rem; |
-m-3 |
margin: -0.75rem; |
-m-3.5 |
margin: -0.875rem; |
-m-4 |
margin: -1rem; |
-m-5 |
margin: -1.25rem; |
-m-6 |
margin: -1.5rem; |
-m-7 |
margin: -1.75rem; |
-m-8 |
margin: -2rem; |
-m-9 |
margin: -2.25rem; |
-m-10 |
margin: -2.5rem; |
-m-11 |
margin: -2.75rem; |
-m-12 |
margin: -3rem; |
-m-14 |
margin: -3.5rem; |
-m-16 |
margin: -4rem; |
-m-20 |
margin: -5rem; |
-m-24 |
margin: -6rem; |
-m-28 |
margin: -7rem; |
-m-32 |
margin: -8rem; |
-m-36 |
margin: -9rem; |
-m-40 |
margin: -10rem; |
-m-44 |
margin: -11rem; |
-m-48 |
margin: -12rem; |
-m-52 |
margin: -13rem; |
-m-56 |
margin: -14rem; |
-m-60 |
margin: -15rem; |
-m-64 |
margin: -16rem; |
-m-72 |
margin: -18rem; |
-m-80 |
margin: -20rem; |
-m-96 |
margin: -24rem; |
mx-0 |
margin-left: 0px;margin-right: 0px;
|
mx-px |
margin-left: 1px;margin-right: 1px;
|
mx-0.5 |
margin-left: 0.125rem;margin-right: 0.125rem;
|
mx-1 |
margin-left: 0.25rem;margin-right: 0.25rem;
|
mx-1.5 |
margin-left: 0.375rem;margin-right: 0.375rem;
|
mx-2 |
margin-left: 0.5rem;margin-right: 0.5rem;
|
mx-2.5 |
margin-left: 0.625rem;margin-right: 0.625rem;
|
mx-3 |
margin-left: 0.75rem;margin-right: 0.75rem;
|
mx-3.5 |
margin-left: 0.875rem;margin-right: 0.875rem;
|
mx-4 |
margin-left: 1rem;margin-right: 1rem;
|
mx-5 |
margin-left: 1.25rem;margin-right: 1.25rem;
|
mx-6 |
margin-left: 1.5rem;margin-right: 1.5rem;
|
mx-7 |
margin-left: 1.75rem;margin-right: 1.75rem;
|
mx-8 |
margin-left: 2rem;margin-right: 2rem;
|
mx-9 |
margin-left: 2.25rem;margin-right: 2.25rem;
|
mx-10 |
margin-left: 2.5rem;margin-right: 2.5rem;
|
mx-11 |
margin-left: 2.75rem;margin-right: 2.75rem;
|
mx-12 |
margin-left: 3rem;margin-right: 3rem;
|
mx-14 |
margin-left: 3.5rem;margin-right: 3.5rem;
|
mx-16 |
margin-left: 4rem;margin-right: 4rem;
|
mx-20 |
margin-left: 5rem;margin-right: 5rem;
|
mx-24 |
margin-left: 6rem;margin-right: 6rem;
|
mx-28 |
margin-left: 7rem;margin-right: 7rem;
|
mx-32 |
margin-left: 8rem;margin-right: 8rem;
|
mx-36 |
margin-left: 9rem;margin-right: 9rem;
|
mx-40 |
margin-left: 10rem;margin-right: 10rem;
|
mx-44 |
margin-left: 11rem;margin-right: 11rem;
|
mx-48 |
margin-left: 12rem;margin-right: 12rem;
|
mx-52 |
margin-left: 13rem;margin-right: 13rem;
|
mx-56 |
margin-left: 14rem;margin-right: 14rem;
|
mx-60 |
margin-left: 15rem;margin-right: 15rem;
|
mx-64 |
margin-left: 16rem;margin-right: 16rem;
|
mx-72 |
margin-left: 18rem;margin-right: 18rem;
|
mx-80 |
margin-left: 20rem;margin-right: 20rem;
|
mx-96 |
margin-left: 24rem;margin-right: 24rem;
|
mx-auto |
margin-left: auto;margin-right: auto;
|
-mx-0 |
margin-left: 0px;margin-right: 0px;
|
-mx-px |
margin-left: -1px;margin-right: -1px;
|
-mx-0.5 |
margin-left: -0.125rem;margin-right: -0.125rem;
|
-mx-1 |
margin-left: -0.25rem;margin-right: -0.25rem;
|
-mx-1.5 |
margin-left: -0.375rem;margin-right: -0.375rem;
|
-mx-2 |
margin-left: -0.5rem;margin-right: -0.5rem;
|
-mx-2.5 |
margin-left: -0.625rem;margin-right: -0.625rem;
|
-mx-3 |
margin-left: -0.75rem;margin-right: -0.75rem;
|
-mx-3.5 |
margin-left: -0.875rem;margin-right: -0.875rem;
|
-mx-4 |
margin-left: -1rem;margin-right: -1rem;
|
-mx-5 |
margin-left: -1.25rem;margin-right: -1.25rem;
|
-mx-6 |
margin-left: -1.5rem;margin-right: -1.5rem;
|
-mx-7 |
margin-left: -1.75rem;margin-right: -1.75rem;
|
-mx-8 |
margin-left: -2rem;margin-right: -2rem;
|
-mx-9 |
margin-left: -2.25rem;margin-right: -2.25rem;
|
-mx-10 |
margin-left: -2.5rem;margin-right: -2.5rem;
|
-mx-11 |
margin-left: -2.75rem;margin-right: -2.75rem;
|
-mx-12 |
margin-left: -3rem;margin-right: -3rem;
|
-mx-14 |
margin-left: -3.5rem;margin-right: -3.5rem;
|
-mx-16 |
margin-left: -4rem;margin-right: -4rem;
|
-mx-20 |
margin-left: -5rem;margin-right: -5rem;
|
-mx-24 |
margin-left: -6rem;margin-right: -6rem;
|
-mx-28 |
margin-left: -7rem;margin-right: -7rem;
|
-mx-32 |
margin-left: -8rem;margin-right: -8rem;
|
-mx-36 |
margin-left: -9rem;margin-right: -9rem;
|
-mx-40 |
margin-left: -10rem;margin-right: -10rem;
|
-mx-44 |
margin-left: -11rem;margin-right: -11rem;
|
-mx-48 |
margin-left: -12rem;margin-right: -12rem;
|
-mx-52 |
margin-left: -13rem;margin-right: -13rem;
|
-mx-56 |
margin-left: -14rem;margin-right: -14rem;
|
-mx-60 |
margin-left: -15rem;margin-right: -15rem;
|
-mx-64 |
margin-left: -16rem;margin-right: -16rem;
|
-mx-72 |
margin-left: -18rem;margin-right: -18rem;
|
-mx-80 |
margin-left: -20rem;margin-right: -20rem;
|
-mx-96 |
margin-left: -24rem;margin-right: -24rem;
|
my-0 |
margin-top: 0px;margin-bottom: 0px;
|
my-px |
margin-top: 1px;margin-bottom: 1px;
|
my-0.5 |
margin-top: 0.125rem;margin-bottom: 0.125rem;
|
my-1 |
margin-top: 0.25rem;margin-bottom: 0.25rem;
|
my-1.5 |
margin-top: 0.375rem;margin-bottom: 0.375rem;
|
my-2 |
margin-top: 0.5rem;margin-bottom: 0.5rem;
|
my-2.5 |
margin-top: 0.625rem;margin-bottom: 0.625rem;
|
my-3 |
margin-top: 0.75rem;margin-bottom: 0.75rem;
|
my-3.5 |
margin-top: 0.875rem;margin-bottom: 0.875rem;
|
my-4 |
margin-top: 1rem;margin-bottom: 1rem;
|
my-5 |
margin-top: 1.25rem;margin-bottom: 1.25rem;
|
my-6 |
margin-top: 1.5rem;margin-bottom: 1.5rem;
|
my-7 |
margin-top: 1.75rem;margin-bottom: 1.75rem;
|
my-8 |
margin-top: 2rem;margin-bottom: 2rem;
|
my-9 |
margin-top: 2.25rem;margin-bottom: 2.25rem;
|
my-10 |
margin-top: 2.5rem;margin-bottom: 2.5rem;
|
my-11 |
margin-top: 2.75rem;margin-bottom: 2.75rem;
|
my-12 |
margin-top: 3rem;margin-bottom: 3rem;
|
my-14 |
margin-top: 3.5rem;margin-bottom: 3.5rem;
|
my-16 |
margin-top: 4rem;margin-bottom: 4rem;
|
my-20 |
margin-top: 5rem;margin-bottom: 5rem;
|
my-24 |
margin-top: 6rem;margin-bottom: 6rem;
|
my-28 |
margin-top: 7rem;margin-bottom: 7rem;
|
my-32 |
margin-top: 8rem;margin-bottom: 8rem;
|
my-36 |
margin-top: 9rem;margin-bottom: 9rem;
|
my-40 |
margin-top: 10rem;margin-bottom: 10rem;
|
my-44 |
margin-top: 11rem;margin-bottom: 11rem;
|
my-48 |
margin-top: 12rem;margin-bottom: 12rem;
|
my-52 |
margin-top: 13rem;margin-bottom: 13rem;
|
my-56 |
margin-top: 14rem;margin-bottom: 14rem;
|
my-60 |
margin-top: 15rem;margin-bottom: 15rem;
|
my-64 |
margin-top: 16rem;margin-bottom: 16rem;
|
my-72 |
margin-top: 18rem;margin-bottom: 18rem;
|
my-80 |
margin-top: 20rem;margin-bottom: 20rem;
|
my-96 |
margin-top: 24rem;margin-bottom: 24rem;
|
my-auto |
margin-top: auto;margin-bottom: auto;
|
-my-0 |
margin-top: 0px;margin-bottom: 0px;
|
-my-px |
margin-top: -1px;margin-bottom: -1px;
|
-my-0.5 |
margin-top: -0.125rem;margin-bottom: -0.125rem;
|
-my-1 |
margin-top: -0.25rem;margin-bottom: -0.25rem;
|
-my-1.5 |
margin-top: -0.375rem;margin-bottom: -0.375rem;
|
-my-2 |
margin-top: -0.5rem;margin-bottom: -0.5rem;
|
-my-2.5 |
margin-top: -0.625rem;margin-bottom: -0.625rem;
|
-my-3 |
margin-top: -0.75rem;margin-bottom: -0.75rem;
|
-my-3.5 |
margin-top: -0.875rem;margin-bottom: -0.875rem;
|
-my-4 |
margin-top: -1rem;margin-bottom: -1rem;
|
-my-5 |
margin-top: -1.25rem;margin-bottom: -1.25rem;
|
-my-6 |
margin-top: -1.5rem;margin-bottom: -1.5rem;
|
-my-7 |
margin-top: -1.75rem;margin-bottom: -1.75rem;
|
-my-8 |
margin-top: -2rem;margin-bottom: -2rem;
|
-my-9 |
margin-top: -2.25rem;margin-bottom: -2.25rem;
|
-my-10 |
margin-top: -2.5rem;margin-bottom: -2.5rem;
|
-my-11 |
margin-top: -2.75rem;margin-bottom: -2.75rem;
|
-my-12 |
margin-top: -3rem;margin-bottom: -3rem;
|
-my-14 |
margin-top: -3.5rem;margin-bottom: -3.5rem;
|
-my-16 |
margin-top: -4rem;margin-bottom: -4rem;
|
-my-20 |
margin-top: -5rem;margin-bottom: -5rem;
|
-my-24 |
margin-top: -6rem;margin-bottom: -6rem;
|
-my-28 |
margin-top: -7rem;margin-bottom: -7rem;
|
-my-32 |
margin-top: -8rem;margin-bottom: -8rem;
|
-my-36 |
margin-top: -9rem;margin-bottom: -9rem;
|
-my-40 |
margin-top: -10rem;margin-bottom: -10rem;
|
-my-44 |
margin-top: -11rem;margin-bottom: -11rem;
|
-my-48 |
margin-top: -12rem;margin-bottom: -12rem;
|
-my-52 |
margin-top: -13rem;margin-bottom: -13rem;
|
-my-56 |
margin-top: -14rem;margin-bottom: -14rem;
|
-my-60 |
margin-top: -15rem;margin-bottom: -15rem;
|
-my-64 |
margin-top: -16rem;margin-bottom: -16rem;
|
-my-72 |
margin-top: -18rem;margin-bottom: -18rem;
|
-my-80 |
margin-top: -20rem;margin-bottom: -20rem;
|
-my-96 |
margin-top: -24rem;margin-bottom: -24rem;
|
mt-0 |
margin-top: 0px; |
mt-px |
margin-top: 1px; |
mt-0.5 |
margin-top: 0.125rem; |
mt-1 |
margin-top: 0.25rem; |
mt-1.5 |
margin-top: 0.375rem; |
mt-2 |
margin-top: 0.5rem; |
mt-2.5 |
margin-top: 0.625rem; |
mt-3 |
margin-top: 0.75rem; |
mt-3.5 |
margin-top: 0.875rem; |
mt-4 |
margin-top: 1rem; |
mt-5 |
margin-top: 1.25rem; |
mt-6 |
margin-top: 1.5rem; |
mt-7 |
margin-top: 1.75rem; |
mt-8 |
margin-top: 2rem; |
mt-9 |
margin-top: 2.25rem; |
mt-10 |
margin-top: 2.5rem; |
mt-11 |
margin-top: 2.75rem; |
mt-12 |
margin-top: 3rem; |
mt-14 |
margin-top: 3.5rem; |
mt-16 |
margin-top: 4rem; |
mt-20 |
margin-top: 5rem; |
mt-24 |
margin-top: 6rem; |
mt-28 |
margin-top: 7rem; |
mt-32 |
margin-top: 8rem; |
mt-36 |
margin-top: 9rem; |
mt-40 |
margin-top: 10rem; |
mt-44 |
margin-top: 11rem; |
mt-48 |
margin-top: 12rem; |
mt-52 |
margin-top: 13rem; |
mt-56 |
margin-top: 14rem; |
mt-60 |
margin-top: 15rem; |
mt-64 |
margin-top: 16rem; |
mt-72 |
margin-top: 18rem; |
mt-80 |
margin-top: 20rem; |
mt-96 |
margin-top: 24rem; |
mt-auto |
margin-top: auto; |
-mt-0 |
margin-top: 0px; |
-mt-px |
margin-top: -1px; |
-mt-0.5 |
margin-top: -0.125rem; |
-mt-1 |
margin-top: -0.25rem; |
-mt-1.5 |
margin-top: -0.375rem; |
-mt-2 |
margin-top: -0.5rem; |
-mt-2.5 |
margin-top: -0.625rem; |
-mt-3 |
margin-top: -0.75rem; |
-mt-3.5 |
margin-top: -0.875rem; |
-mt-4 |
margin-top: -1rem; |
-mt-5 |
margin-top: -1.25rem; |
-mt-6 |
margin-top: -1.5rem; |
-mt-7 |
margin-top: -1.75rem; |
-mt-8 |
margin-top: -2rem; |
-mt-9 |
margin-top: -2.25rem; |
-mt-10 |
margin-top: -2.5rem; |
-mt-11 |
margin-top: -2.75rem; |
-mt-12 |
margin-top: -3rem; |
-mt-14 |
margin-top: -3.5rem; |
-mt-16 |
margin-top: -4rem; |
-mt-20 |
margin-top: -5rem; |
-mt-24 |
margin-top: -6rem; |
-mt-28 |
margin-top: -7rem; |
-mt-32 |
margin-top: -8rem; |
-mt-36 |
margin-top: -9rem; |
-mt-40 |
margin-top: -10rem; |
-mt-44 |
margin-top: -11rem; |
-mt-48 |
margin-top: -12rem; |
-mt-52 |
margin-top: -13rem; |
-mt-56 |
margin-top: -14rem; |
-mt-60 |
margin-top: -15rem; |
-mt-64 |
margin-top: -16rem; |
-mt-72 |
margin-top: -18rem; |
-mt-80 |
margin-top: -20rem; |
-mt-96 |
margin-top: -24rem; |
mr-0 |
margin-right: 0px; |
mr-px |
margin-right: 1px; |
mr-0.5 |
margin-right: 0.125rem; |
mr-1 |
margin-right: 0.25rem; |
mr-1.5 |
margin-right: 0.375rem; |
mr-2 |
margin-right: 0.5rem; |
mr-2.5 |
margin-right: 0.625rem; |
mr-3 |
margin-right: 0.75rem; |
mr-3.5 |
margin-right: 0.875rem; |
mr-4 |
margin-right: 1rem; |
mr-5 |
margin-right: 1.25rem; |
mr-6 |
margin-right: 1.5rem; |
mr-7 |
margin-right: 1.75rem; |
mr-8 |
margin-right: 2rem; |
mr-9 |
margin-right: 2.25rem; |
mr-10 |
margin-right: 2.5rem; |
mr-11 |
margin-right: 2.75rem; |
mr-12 |
margin-right: 3rem; |
mr-14 |
margin-right: 3.5rem; |
mr-16 |
margin-right: 4rem; |
mr-20 |
margin-right: 5rem; |
mr-24 |
margin-right: 6rem; |
mr-28 |
margin-right: 7rem; |
mr-32 |
margin-right: 8rem; |
mr-36 |
margin-right: 9rem; |
mr-40 |
margin-right: 10rem; |
mr-44 |
margin-right: 11rem; |
mr-48 |
margin-right: 12rem; |
mr-52 |
margin-right: 13rem; |
mr-56 |
margin-right: 14rem; |
mr-60 |
margin-right: 15rem; |
mr-64 |
margin-right: 16rem; |
mr-72 |
margin-right: 18rem; |
mr-80 |
margin-right: 20rem; |
mr-96 |
margin-right: 24rem; |
mr-auto |
margin-right: auto; |
-mr-0 |
margin-right: 0px; |
-mr-px |
margin-right: -1px; |
-mr-0.5 |
margin-right: -0.125rem; |
-mr-1 |
margin-right: -0.25rem; |
-mr-1.5 |
margin-right: -0.375rem; |
-mr-2 |
margin-right: -0.5rem; |
-mr-2.5 |
margin-right: -0.625rem; |
-mr-3 |
margin-right: -0.75rem; |
-mr-3.5 |
margin-right: -0.875rem; |
-mr-4 |
margin-right: -1rem; |
-mr-5 |
margin-right: -1.25rem; |
-mr-6 |
margin-right: -1.5rem; |
-mr-7 |
margin-right: -1.75rem; |
-mr-8 |
margin-right: -2rem; |
-mr-9 |
margin-right: -2.25rem; |
-mr-10 |
margin-right: -2.5rem; |
-mr-11 |
margin-right: -2.75rem; |
-mr-12 |
margin-right: -3rem; |
-mr-14 |
margin-right: -3.5rem; |
-mr-16 |
margin-right: -4rem; |
-mr-20 |
margin-right: -5rem; |
-mr-24 |
margin-right: -6rem; |
-mr-28 |
margin-right: -7rem; |
-mr-32 |
margin-right: -8rem; |
-mr-36 |
margin-right: -9rem; |
-mr-40 |
margin-right: -10rem; |
-mr-44 |
margin-right: -11rem; |
-mr-48 |
margin-right: -12rem; |
-mr-52 |
margin-right: -13rem; |
-mr-56 |
margin-right: -14rem; |
-mr-60 |
margin-right: -15rem; |
-mr-64 |
margin-right: -16rem; |
-mr-72 |
margin-right: -18rem; |
-mr-80 |
margin-right: -20rem; |
-mr-96 |
margin-right: -24rem; |
mb-0 |
margin-bottom: 0px; |
mb-px |
margin-bottom: 1px; |
mb-0.5 |
margin-bottom: 0.125rem; |
mb-1 |
margin-bottom: 0.25rem; |
mb-1.5 |
margin-bottom: 0.375rem; |
mb-2 |
margin-bottom: 0.5rem; |
mb-2.5 |
margin-bottom: 0.625rem; |
mb-3 |
margin-bottom: 0.75rem; |
mb-3.5 |
margin-bottom: 0.875rem; |
mb-4 |
margin-bottom: 1rem; |
mb-5 |
margin-bottom: 1.25rem; |
mb-6 |
margin-bottom: 1.5rem; |
mb-7 |
margin-bottom: 1.75rem; |
mb-8 |
margin-bottom: 2rem; |
mb-9 |
margin-bottom: 2.25rem; |
mb-10 |
margin-bottom: 2.5rem; |
mb-11 |
margin-bottom: 2.75rem; |
mb-12 |
margin-bottom: 3rem; |
mb-14 |
margin-bottom: 3.5rem; |
mb-16 |
margin-bottom: 4rem; |
mb-20 |
margin-bottom: 5rem; |
mb-24 |
margin-bottom: 6rem; |
mb-28 |
margin-bottom: 7rem; |
mb-32 |
margin-bottom: 8rem; |
mb-36 |
margin-bottom: 9rem; |
mb-40 |
margin-bottom: 10rem; |
mb-44 |
margin-bottom: 11rem; |
mb-48 |
margin-bottom: 12rem; |
mb-52 |
margin-bottom: 13rem; |
mb-56 |
margin-bottom: 14rem; |
mb-60 |
margin-bottom: 15rem; |
mb-64 |
margin-bottom: 16rem; |
mb-72 |
margin-bottom: 18rem; |
mb-80 |
margin-bottom: 20rem; |
mb-96 |
margin-bottom: 24rem; |
mb-auto |
margin-bottom: auto; |
-mb-0 |
margin-bottom: 0px; |
-mb-px |
margin-bottom: -1px; |
-mb-0.5 |
margin-bottom: -0.125rem; |
-mb-1 |
margin-bottom: -0.25rem; |
-mb-1.5 |
margin-bottom: -0.375rem; |
-mb-2 |
margin-bottom: -0.5rem; |
-mb-2.5 |
margin-bottom: -0.625rem; |
-mb-3 |
margin-bottom: -0.75rem; |
-mb-3.5 |
margin-bottom: -0.875rem; |
-mb-4 |
margin-bottom: -1rem; |
-mb-5 |
margin-bottom: -1.25rem; |
-mb-6 |
margin-bottom: -1.5rem; |
-mb-7 |
margin-bottom: -1.75rem; |
-mb-8 |
margin-bottom: -2rem; |
-mb-9 |
margin-bottom: -2.25rem; |
-mb-10 |
margin-bottom: -2.5rem; |
-mb-11 |
margin-bottom: -2.75rem; |
-mb-12 |
margin-bottom: -3rem; |
-mb-14 |
margin-bottom: -3.5rem; |
-mb-16 |
margin-bottom: -4rem; |
-mb-20 |
margin-bottom: -5rem; |
-mb-24 |
margin-bottom: -6rem; |
-mb-28 |
margin-bottom: -7rem; |
-mb-32 |
margin-bottom: -8rem; |
-mb-36 |
margin-bottom: -9rem; |
-mb-40 |
margin-bottom: -10rem; |
-mb-44 |
margin-bottom: -11rem; |
-mb-48 |
margin-bottom: -12rem; |
-mb-52 |
margin-bottom: -13rem; |
-mb-56 |
margin-bottom: -14rem; |
-mb-60 |
margin-bottom: -15rem; |
-mb-64 |
margin-bottom: -16rem; |
-mb-72 |
margin-bottom: -18rem; |
-mb-80 |
margin-bottom: -20rem; |
-mb-96 |
margin-bottom: -24rem; |
ml-0 |
margin-left: 0px; |
ml-px |
margin-left: 1px; |
ml-0.5 |
margin-left: 0.125rem; |
ml-1 |
margin-left: 0.25rem; |
ml-1.5 |
margin-left: 0.375rem; |
ml-2 |
margin-left: 0.5rem; |
ml-2.5 |
margin-left: 0.625rem; |
ml-3 |
margin-left: 0.75rem; |
ml-3.5 |
margin-left: 0.875rem; |
ml-4 |
margin-left: 1rem; |
ml-5 |
margin-left: 1.25rem; |
ml-6 |
margin-left: 1.5rem; |
ml-7 |
margin-left: 1.75rem; |
ml-8 |
margin-left: 2rem; |
ml-9 |
margin-left: 2.25rem; |
ml-10 |
margin-left: 2.5rem; |
ml-11 |
margin-left: 2.75rem; |
ml-12 |
margin-left: 3rem; |
ml-14 |
margin-left: 3.5rem; |
ml-16 |
margin-left: 4rem; |
ml-20 |
margin-left: 5rem; |
ml-24 |
margin-left: 6rem; |
ml-28 |
margin-left: 7rem; |
ml-32 |
margin-left: 8rem; |
ml-36 |
margin-left: 9rem; |
ml-40 |
margin-left: 10rem; |
ml-44 |
margin-left: 11rem; |
ml-48 |
margin-left: 12rem; |
ml-52 |
margin-left: 13rem; |
ml-56 |
margin-left: 14rem; |
ml-60 |
margin-left: 15rem; |
ml-64 |
margin-left: 16rem; |
ml-72 |
margin-left: 18rem; |
ml-80 |
margin-left: 20rem; |
ml-96 |
margin-left: 24rem; |
ml-auto |
margin-left: auto; |
-ml-0 |
margin-left: 0px; |
-ml-px |
margin-left: -1px; |
-ml-0.5 |
margin-left: -0.125rem; |
-ml-1 |
margin-left: -0.25rem; |
-ml-1.5 |
margin-left: -0.375rem; |
-ml-2 |
margin-left: -0.5rem; |
-ml-2.5 |
margin-left: -0.625rem; |
-ml-3 |
margin-left: -0.75rem; |
-ml-3.5 |
margin-left: -0.875rem; |
-ml-4 |
margin-left: -1rem; |
-ml-5 |
margin-left: -1.25rem; |
-ml-6 |
margin-left: -1.5rem; |
-ml-7 |
margin-left: -1.75rem; |
-ml-8 |
margin-left: -2rem; |
-ml-9 |
margin-left: -2.25rem; |
-ml-10 |
margin-left: -2.5rem; |
-ml-11 |
margin-left: -2.75rem; |
-ml-12 |
margin-left: -3rem; |
-ml-14 |
margin-left: -3.5rem; |
-ml-16 |
margin-left: -4rem; |
-ml-20 |
margin-left: -5rem; |
-ml-24 |
margin-left: -6rem; |
-ml-28 |
margin-left: -7rem; |
-ml-32 |
margin-left: -8rem; |
-ml-36 |
margin-left: -9rem; |
-ml-40 |
margin-left: -10rem; |
-ml-44 |
margin-left: -11rem; |
-ml-48 |
margin-left: -12rem; |
-ml-52 |
margin-left: -13rem; |
-ml-56 |
margin-left: -14rem; |
-ml-60 |
margin-left: -15rem; |
-ml-64 |
margin-left: -16rem; |
-ml-72 |
margin-left: -18rem; |
-ml-80 |
margin-left: -20rem; |
-ml-96 |
margin-left: -24rem; |
１方向にだけ margin を加える
m{t|r|b|l}-{size}ユーティリティーを使って、要素の片側に margin をコントロールします。
例えば、mt-6は要素の上部に1.5rem、mr-4は要素の右に1rem、mb-8は要素の下部に2rem、ml-2は要素の左に0.5remの余白を追加します。
<div class="mt-8 ...">mt-8</div>
<div class="mr-8 ...">mr-8</div>
<div class="mb-8 ...">mb-8</div>
<div class="ml-8 ...">ml-8</div>
水平方向の margin の追加
mx-{size}ユーティリティーを使って、要素の水平方向の margin を制御します。
<div class="mx-8 ...">mx-8</div>
垂直方向の margin の追加
my-{size}ユーティリティーを使って、要素の垂直方向の margin を制御します。
<div class="my-8 ...">my-8</div>
すべての方向に margin を加える
m-{size}ユーティリティーを使って、要素の全方向の margin を制御します。
<div class="m-8 ...">m-8</div>
ネガティブ margin
m{side?}-{size}ユーティリティーを使って、要素のネガティブ margin を制御します。
<div class="w-32 h-16 bg-fuchsia-300 ..."></div>
<div class="-mt-8 bg-fuchsia-500 ...">-mt-8</div>
レスポンシブ
特定のブレークポイントにおける要素のマージンを制御するには、既存のマージン・ユーティリティーに{screen}:というプレフィックスを追加します。例えば、ある要素にmd:my-8というクラスを追加すると、中程度のスクリーンサイズ以上でmy-8ユーティリティが適用されます。
<div class="mt-8 md:my-8">
<!-- ... -->
</div>
Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。
カスタマイズ
margin スケール
デフォルトでは、Tailwind は各辺と軸に対して 20 のマージンユーティリティを提供しています。
もし、これらのパディング、マージン、幅、高さの値を一度にカスタマイズしたい場合は、tailwind.config.jsファイルのtheme.spacingセクションを使用してください。
tailwind.config.js
module.exports = {
theme: {
spacing: {
+ sm: '8px',
+ md: '16px',
+ lg: '24px',
+ xl: '48px',
}
}
}
マージンの値だけをカスタマイズするには、tailwind.config.jsファイルのtheme.marginセクションを使用します。
tailwind.config.js
module.exports = {
theme: {
margin: {
+ sm: '8px',
+ md: '16px',
+ lg: '24px',
+ xl: '48px',
}
}
}
デフォルトテーマのカスタマイズについては、テーマのカスタマイズに関するドキュメントをご覧ください。
ネガティブなバリュー
負のマージンクラス（-m{side?}-{size}という形式）を追加したい場合は、設定ファイルのキーの前にダッシュを付けてください。
tailwind.config.js
module.exports = {
theme: {
extend: {
margin: {
+ '-72': '-18rem',
}
}
}
}
Tailwind は賢いので、先頭にダッシュがあると予想されるようなmx--72ではなく、-mx-72のようなクラスを生成します。
バリアント
デフォルトでは、マージンユーティリティにはレスポンシブバリアントのみが生成されます。
tailwind.config.jsファイルのvariantsセクションにあるmarginプロパティを変更することで、マージンユーティリティのために生成されるバリアントをコントロールすることができます。
例えば、この設定はhoverとfocusのバリアントも生成します。
tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ margin: ['hover', 'focus'],
}
}
}
無効化
プロジェクトでマージンユーティリティを使用しない場合は、設定ファイルのcorePluginsセクションでmarginプロパティをfalseに設定することで、完全に無効にすることができます。
tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ margin: false,
}
}
Discussion