Tailwind CSS 外邊距

2022-08-08 10:04 更新

外邊距

控制元素外邊距的功能類

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;

為單側(cè)添加外邊距

使用 ?m{t|r|b|l}-{size}? 功能類控制元素一側(cè)的外邊距。

例如,?mt-6? 將在元素頂部增加 ?1.5rem? 的外邊距,?mr-4? 將在元素右側(cè)增加 ?1rem? 的外邊距,?mb-8? 將在元素底部增加 ?2rem? 的外邊距,?ml-2? 將在元素左側(cè)增加 ?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>

添加水平方向的外邊距

使用 ?mx-{size}? 功能類控制元素水平方向的外邊距。


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

添加垂直方向的外邊距

使用 ?my-{size}? 功能類控制元素垂直方向的外邊距。


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

為四個(gè)邊添加外邊距

使用 ?m-{size}? 功能類控制元素四個(gè)邊的外邊距。


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

負(fù)外邊距

使用 ?-m{side?}-{size}? 功能類控制元素的負(fù)外邊距。


<div class="w-32 h-16 bg-fuchsia-300 ..."></div>
<div class="-mt-8 bg-fuchsia-500 ...">-mt-8</div>

響應(yīng)式

要在特定的斷點(diǎn)處控制元素的外邊距,請(qǐng)?jiān)谌魏维F(xiàn)有的 margin 功能類前添加 ?{screen}:? 前綴。例如,將 ?md:my-8? 類添加到一個(gè)元素中,就可以在中等及以上屏幕尺寸的情況下應(yīng)用 ?my-8? 功能。

<div class="mt-8 md:my-8">
    <!-- ... -->
</div>

關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息,請(qǐng)查看 響應(yīng)式設(shè)計(jì) 文檔。

自定義

外邊距比例

默認(rèn)情況下,Tailwind 為每個(gè)邊和軸提供 20 個(gè)邊距實(shí)用程序。

如果您想一次性自定義 padding、margin、width 和 height 的值,請(qǐng)使用您的 ?tailwind.config.js? 文件中的 ?theme.spacing? 部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
       sm: '8px',
       md: '16px',
       lg: '24px',
       xl: '48px',
      }
    }
  }

如果只想自定義外邊距值,請(qǐng)使用您的 ?tailwind.config.js? 文件中的 ?theme.margin? 部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      margin: {
       sm: '8px',
       md: '16px',
       lg: '24px',
       xl: '48px',
      }
    }
  }

在 主題自定義文檔 中了解更多關(guān)于自定義默認(rèn)主題的信息。

負(fù)值

如果您想添加額外的負(fù)頁邊距類(采取?-m{side?}-{size}?的形式),在配置文件中的鍵前加上破折號(hào)。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        margin: {
         '-72': '-18rem',
        }
      }
    }
  }

Tailwind 是足夠聰明的,當(dāng)它看到前面的破折號(hào)時(shí),會(huì)生成像 ?-mx-72? 這樣的類,而不是像您可能期望的 ?mx--72?。

變體

默認(rèn)情況下, 針對(duì) margin 功能類,只生成 responsive 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?margin ?屬性來控制為 margin 功能生成哪些變體。

例如,這個(gè)配置也將生成 hover and focus 變體:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       margin: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的項(xiàng)目中使用 margin 功能,您可以通過在配置文件的 ?corePlugins ?部分將 ?margin ?屬性設(shè)置為 ?false ?來完全禁用它們:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     margin: false,
    }
  }


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)