Tailwind CSS on GitHub

外边距

控制元素外边距的功能类

Default class reference

Class
Properties
m-0margin: 0px;
m-0.5margin: 0.125rem;
m-1margin: 0.25rem;
m-1.5margin: 0.375rem;
m-2margin: 0.5rem;
m-2.5margin: 0.625rem;
m-3margin: 0.75rem;
m-3.5margin: 0.875rem;
m-4margin: 1rem;
m-5margin: 1.25rem;
m-6margin: 1.5rem;
m-7margin: 1.75rem;
m-8margin: 2rem;
m-9margin: 2.25rem;
m-10margin: 2.5rem;
m-11margin: 2.75rem;
m-12margin: 3rem;
m-14margin: 3.5rem;
m-16margin: 4rem;
m-20margin: 5rem;
m-24margin: 6rem;
m-28margin: 7rem;
m-32margin: 8rem;
m-36margin: 9rem;
m-40margin: 10rem;
m-44margin: 11rem;
m-48margin: 12rem;
m-52margin: 13rem;
m-56margin: 14rem;
m-60margin: 15rem;
m-64margin: 16rem;
m-72margin: 18rem;
m-80margin: 20rem;
m-96margin: 24rem;
m-automargin: auto;
m-pxmargin: 1px;
-m-0margin: 0px;
-m-0.5margin: -0.125rem;
-m-1margin: -0.25rem;
-m-1.5margin: -0.375rem;
-m-2margin: -0.5rem;
-m-2.5margin: -0.625rem;
-m-3margin: -0.75rem;
-m-3.5margin: -0.875rem;
-m-4margin: -1rem;
-m-5margin: -1.25rem;
-m-6margin: -1.5rem;
-m-7margin: -1.75rem;
-m-8margin: -2rem;
-m-9margin: -2.25rem;
-m-10margin: -2.5rem;
-m-11margin: -2.75rem;
-m-12margin: -3rem;
-m-14margin: -3.5rem;
-m-16margin: -4rem;
-m-20margin: -5rem;
-m-24margin: -6rem;
-m-28margin: -7rem;
-m-32margin: -8rem;
-m-36margin: -9rem;
-m-40margin: -10rem;
-m-44margin: -11rem;
-m-48margin: -12rem;
-m-52margin: -13rem;
-m-56margin: -14rem;
-m-60margin: -15rem;
-m-64margin: -16rem;
-m-72margin: -18rem;
-m-80margin: -20rem;
-m-96margin: -24rem;
-m-pxmargin: -1px;
my-0margin-top: 0px; margin-bottom: 0px;
my-0.5margin-top: 0.125rem; margin-bottom: 0.125rem;
my-1margin-top: 0.25rem; margin-bottom: 0.25rem;
my-1.5margin-top: 0.375rem; margin-bottom: 0.375rem;
my-2margin-top: 0.5rem; margin-bottom: 0.5rem;
my-2.5margin-top: 0.625rem; margin-bottom: 0.625rem;
my-3margin-top: 0.75rem; margin-bottom: 0.75rem;
my-3.5margin-top: 0.875rem; margin-bottom: 0.875rem;
my-4margin-top: 1rem; margin-bottom: 1rem;
my-5margin-top: 1.25rem; margin-bottom: 1.25rem;
my-6margin-top: 1.5rem; margin-bottom: 1.5rem;
my-7margin-top: 1.75rem; margin-bottom: 1.75rem;
my-8margin-top: 2rem; margin-bottom: 2rem;
my-9margin-top: 2.25rem; margin-bottom: 2.25rem;
my-10margin-top: 2.5rem; margin-bottom: 2.5rem;
my-11margin-top: 2.75rem; margin-bottom: 2.75rem;
my-12margin-top: 3rem; margin-bottom: 3rem;
my-14margin-top: 3.5rem; margin-bottom: 3.5rem;
my-16margin-top: 4rem; margin-bottom: 4rem;
my-20margin-top: 5rem; margin-bottom: 5rem;
my-24margin-top: 6rem; margin-bottom: 6rem;
my-28margin-top: 7rem; margin-bottom: 7rem;
my-32margin-top: 8rem; margin-bottom: 8rem;
my-36margin-top: 9rem; margin-bottom: 9rem;
my-40margin-top: 10rem; margin-bottom: 10rem;
my-44margin-top: 11rem; margin-bottom: 11rem;
my-48margin-top: 12rem; margin-bottom: 12rem;
my-52margin-top: 13rem; margin-bottom: 13rem;
my-56margin-top: 14rem; margin-bottom: 14rem;
my-60margin-top: 15rem; margin-bottom: 15rem;
my-64margin-top: 16rem; margin-bottom: 16rem;
my-72margin-top: 18rem; margin-bottom: 18rem;
my-80margin-top: 20rem; margin-bottom: 20rem;
my-96margin-top: 24rem; margin-bottom: 24rem;
my-automargin-top: auto; margin-bottom: auto;
my-pxmargin-top: 1px; margin-bottom: 1px;
mx-0margin-left: 0px; margin-right: 0px;
mx-0.5margin-left: 0.125rem; margin-right: 0.125rem;
mx-1margin-left: 0.25rem; margin-right: 0.25rem;
mx-1.5margin-left: 0.375rem; margin-right: 0.375rem;
mx-2margin-left: 0.5rem; margin-right: 0.5rem;
mx-2.5margin-left: 0.625rem; margin-right: 0.625rem;
mx-3margin-left: 0.75rem; margin-right: 0.75rem;
mx-3.5margin-left: 0.875rem; margin-right: 0.875rem;
mx-4margin-left: 1rem; margin-right: 1rem;
mx-5margin-left: 1.25rem; margin-right: 1.25rem;
mx-6margin-left: 1.5rem; margin-right: 1.5rem;
mx-7margin-left: 1.75rem; margin-right: 1.75rem;
mx-8margin-left: 2rem; margin-right: 2rem;
mx-9margin-left: 2.25rem; margin-right: 2.25rem;
mx-10margin-left: 2.5rem; margin-right: 2.5rem;
mx-11margin-left: 2.75rem; margin-right: 2.75rem;
mx-12margin-left: 3rem; margin-right: 3rem;
mx-14margin-left: 3.5rem; margin-right: 3.5rem;
mx-16margin-left: 4rem; margin-right: 4rem;
mx-20margin-left: 5rem; margin-right: 5rem;
mx-24margin-left: 6rem; margin-right: 6rem;
mx-28margin-left: 7rem; margin-right: 7rem;
mx-32margin-left: 8rem; margin-right: 8rem;
mx-36margin-left: 9rem; margin-right: 9rem;
mx-40margin-left: 10rem; margin-right: 10rem;
mx-44margin-left: 11rem; margin-right: 11rem;
mx-48margin-left: 12rem; margin-right: 12rem;
mx-52margin-left: 13rem; margin-right: 13rem;
mx-56margin-left: 14rem; margin-right: 14rem;
mx-60margin-left: 15rem; margin-right: 15rem;
mx-64margin-left: 16rem; margin-right: 16rem;
mx-72margin-left: 18rem; margin-right: 18rem;
mx-80margin-left: 20rem; margin-right: 20rem;
mx-96margin-left: 24rem; margin-right: 24rem;
mx-automargin-left: auto; margin-right: auto;
mx-pxmargin-left: 1px; margin-right: 1px;
-my-0margin-top: 0px; margin-bottom: 0px;
-my-0.5margin-top: -0.125rem; margin-bottom: -0.125rem;
-my-1margin-top: -0.25rem; margin-bottom: -0.25rem;
-my-1.5margin-top: -0.375rem; margin-bottom: -0.375rem;
-my-2margin-top: -0.5rem; margin-bottom: -0.5rem;
-my-2.5margin-top: -0.625rem; margin-bottom: -0.625rem;
-my-3margin-top: -0.75rem; margin-bottom: -0.75rem;
-my-3.5margin-top: -0.875rem; margin-bottom: -0.875rem;
-my-4margin-top: -1rem; margin-bottom: -1rem;
-my-5margin-top: -1.25rem; margin-bottom: -1.25rem;
-my-6margin-top: -1.5rem; margin-bottom: -1.5rem;
-my-7margin-top: -1.75rem; margin-bottom: -1.75rem;
-my-8margin-top: -2rem; margin-bottom: -2rem;
-my-9margin-top: -2.25rem; margin-bottom: -2.25rem;
-my-10margin-top: -2.5rem; margin-bottom: -2.5rem;
-my-11margin-top: -2.75rem; margin-bottom: -2.75rem;
-my-12margin-top: -3rem; margin-bottom: -3rem;
-my-14margin-top: -3.5rem; margin-bottom: -3.5rem;
-my-16margin-top: -4rem; margin-bottom: -4rem;
-my-20margin-top: -5rem; margin-bottom: -5rem;
-my-24margin-top: -6rem; margin-bottom: -6rem;
-my-28margin-top: -7rem; margin-bottom: -7rem;
-my-32margin-top: -8rem; margin-bottom: -8rem;
-my-36margin-top: -9rem; margin-bottom: -9rem;
-my-40margin-top: -10rem; margin-bottom: -10rem;
-my-44margin-top: -11rem; margin-bottom: -11rem;
-my-48margin-top: -12rem; margin-bottom: -12rem;
-my-52margin-top: -13rem; margin-bottom: -13rem;
-my-56margin-top: -14rem; margin-bottom: -14rem;
-my-60margin-top: -15rem; margin-bottom: -15rem;
-my-64margin-top: -16rem; margin-bottom: -16rem;
-my-72margin-top: -18rem; margin-bottom: -18rem;
-my-80margin-top: -20rem; margin-bottom: -20rem;
-my-96margin-top: -24rem; margin-bottom: -24rem;
-my-pxmargin-top: -1px; margin-bottom: -1px;
-mx-0margin-left: 0px; margin-right: 0px;
-mx-0.5margin-left: -0.125rem; margin-right: -0.125rem;
-mx-1margin-left: -0.25rem; margin-right: -0.25rem;
-mx-1.5margin-left: -0.375rem; margin-right: -0.375rem;
-mx-2margin-left: -0.5rem; margin-right: -0.5rem;
-mx-2.5margin-left: -0.625rem; margin-right: -0.625rem;
-mx-3margin-left: -0.75rem; margin-right: -0.75rem;
-mx-3.5margin-left: -0.875rem; margin-right: -0.875rem;
-mx-4margin-left: -1rem; margin-right: -1rem;
-mx-5margin-left: -1.25rem; margin-right: -1.25rem;
-mx-6margin-left: -1.5rem; margin-right: -1.5rem;
-mx-7margin-left: -1.75rem; margin-right: -1.75rem;
-mx-8margin-left: -2rem; margin-right: -2rem;
-mx-9margin-left: -2.25rem; margin-right: -2.25rem;
-mx-10margin-left: -2.5rem; margin-right: -2.5rem;
-mx-11margin-left: -2.75rem; margin-right: -2.75rem;
-mx-12margin-left: -3rem; margin-right: -3rem;
-mx-14margin-left: -3.5rem; margin-right: -3.5rem;
-mx-16margin-left: -4rem; margin-right: -4rem;
-mx-20margin-left: -5rem; margin-right: -5rem;
-mx-24margin-left: -6rem; margin-right: -6rem;
-mx-28margin-left: -7rem; margin-right: -7rem;
-mx-32margin-left: -8rem; margin-right: -8rem;
-mx-36margin-left: -9rem; margin-right: -9rem;
-mx-40margin-left: -10rem; margin-right: -10rem;
-mx-44margin-left: -11rem; margin-right: -11rem;
-mx-48margin-left: -12rem; margin-right: -12rem;
-mx-52margin-left: -13rem; margin-right: -13rem;
-mx-56margin-left: -14rem; margin-right: -14rem;
-mx-60margin-left: -15rem; margin-right: -15rem;
-mx-64margin-left: -16rem; margin-right: -16rem;
-mx-72margin-left: -18rem; margin-right: -18rem;
-mx-80margin-left: -20rem; margin-right: -20rem;
-mx-96margin-left: -24rem; margin-right: -24rem;
-mx-pxmargin-left: -1px; margin-right: -1px;
mt-0margin-top: 0px;
mt-0.5margin-top: 0.125rem;
mt-1margin-top: 0.25rem;
mt-1.5margin-top: 0.375rem;
mt-2margin-top: 0.5rem;
mt-2.5margin-top: 0.625rem;
mt-3margin-top: 0.75rem;
mt-3.5margin-top: 0.875rem;
mt-4margin-top: 1rem;
mt-5margin-top: 1.25rem;
mt-6margin-top: 1.5rem;
mt-7margin-top: 1.75rem;
mt-8margin-top: 2rem;
mt-9margin-top: 2.25rem;
mt-10margin-top: 2.5rem;
mt-11margin-top: 2.75rem;
mt-12margin-top: 3rem;
mt-14margin-top: 3.5rem;
mt-16margin-top: 4rem;
mt-20margin-top: 5rem;
mt-24margin-top: 6rem;
mt-28margin-top: 7rem;
mt-32margin-top: 8rem;
mt-36margin-top: 9rem;
mt-40margin-top: 10rem;
mt-44margin-top: 11rem;
mt-48margin-top: 12rem;
mt-52margin-top: 13rem;
mt-56margin-top: 14rem;
mt-60margin-top: 15rem;
mt-64margin-top: 16rem;
mt-72margin-top: 18rem;
mt-80margin-top: 20rem;
mt-96margin-top: 24rem;
mt-automargin-top: auto;
mt-pxmargin-top: 1px;
mr-0margin-right: 0px;
mr-0.5margin-right: 0.125rem;
mr-1margin-right: 0.25rem;
mr-1.5margin-right: 0.375rem;
mr-2margin-right: 0.5rem;
mr-2.5margin-right: 0.625rem;
mr-3margin-right: 0.75rem;
mr-3.5margin-right: 0.875rem;
mr-4margin-right: 1rem;
mr-5margin-right: 1.25rem;
mr-6margin-right: 1.5rem;
mr-7margin-right: 1.75rem;
mr-8margin-right: 2rem;
mr-9margin-right: 2.25rem;
mr-10margin-right: 2.5rem;
mr-11margin-right: 2.75rem;
mr-12margin-right: 3rem;
mr-14margin-right: 3.5rem;
mr-16margin-right: 4rem;
mr-20margin-right: 5rem;
mr-24margin-right: 6rem;
mr-28margin-right: 7rem;
mr-32margin-right: 8rem;
mr-36margin-right: 9rem;
mr-40margin-right: 10rem;
mr-44margin-right: 11rem;
mr-48margin-right: 12rem;
mr-52margin-right: 13rem;
mr-56margin-right: 14rem;
mr-60margin-right: 15rem;
mr-64margin-right: 16rem;
mr-72margin-right: 18rem;
mr-80margin-right: 20rem;
mr-96margin-right: 24rem;
mr-automargin-right: auto;
mr-pxmargin-right: 1px;
mb-0margin-bottom: 0px;
mb-0.5margin-bottom: 0.125rem;
mb-1margin-bottom: 0.25rem;
mb-1.5margin-bottom: 0.375rem;
mb-2margin-bottom: 0.5rem;
mb-2.5margin-bottom: 0.625rem;
mb-3margin-bottom: 0.75rem;
mb-3.5margin-bottom: 0.875rem;
mb-4margin-bottom: 1rem;
mb-5margin-bottom: 1.25rem;
mb-6margin-bottom: 1.5rem;
mb-7margin-bottom: 1.75rem;
mb-8margin-bottom: 2rem;
mb-9margin-bottom: 2.25rem;
mb-10margin-bottom: 2.5rem;
mb-11margin-bottom: 2.75rem;
mb-12margin-bottom: 3rem;
mb-14margin-bottom: 3.5rem;
mb-16margin-bottom: 4rem;
mb-20margin-bottom: 5rem;
mb-24margin-bottom: 6rem;
mb-28margin-bottom: 7rem;
mb-32margin-bottom: 8rem;
mb-36margin-bottom: 9rem;
mb-40margin-bottom: 10rem;
mb-44margin-bottom: 11rem;
mb-48margin-bottom: 12rem;
mb-52margin-bottom: 13rem;
mb-56margin-bottom: 14rem;
mb-60margin-bottom: 15rem;
mb-64margin-bottom: 16rem;
mb-72margin-bottom: 18rem;
mb-80margin-bottom: 20rem;
mb-96margin-bottom: 24rem;
mb-automargin-bottom: auto;
mb-pxmargin-bottom: 1px;
ml-0margin-left: 0px;
ml-0.5margin-left: 0.125rem;
ml-1margin-left: 0.25rem;
ml-1.5margin-left: 0.375rem;
ml-2margin-left: 0.5rem;
ml-2.5margin-left: 0.625rem;
ml-3margin-left: 0.75rem;
ml-3.5margin-left: 0.875rem;
ml-4margin-left: 1rem;
ml-5margin-left: 1.25rem;
ml-6margin-left: 1.5rem;
ml-7margin-left: 1.75rem;
ml-8margin-left: 2rem;
ml-9margin-left: 2.25rem;
ml-10margin-left: 2.5rem;
ml-11margin-left: 2.75rem;
ml-12margin-left: 3rem;
ml-14margin-left: 3.5rem;
ml-16margin-left: 4rem;
ml-20margin-left: 5rem;
ml-24margin-left: 6rem;
ml-28margin-left: 7rem;
ml-32margin-left: 8rem;
ml-36margin-left: 9rem;
ml-40margin-left: 10rem;
ml-44margin-left: 11rem;
ml-48margin-left: 12rem;
ml-52margin-left: 13rem;
ml-56margin-left: 14rem;
ml-60margin-left: 15rem;
ml-64margin-left: 16rem;
ml-72margin-left: 18rem;
ml-80margin-left: 20rem;
ml-96margin-left: 24rem;
ml-automargin-left: auto;
ml-pxmargin-left: 1px;
-mt-0margin-top: 0px;
-mt-0.5margin-top: -0.125rem;
-mt-1margin-top: -0.25rem;
-mt-1.5margin-top: -0.375rem;
-mt-2margin-top: -0.5rem;
-mt-2.5margin-top: -0.625rem;
-mt-3margin-top: -0.75rem;
-mt-3.5margin-top: -0.875rem;
-mt-4margin-top: -1rem;
-mt-5margin-top: -1.25rem;
-mt-6margin-top: -1.5rem;
-mt-7margin-top: -1.75rem;
-mt-8margin-top: -2rem;
-mt-9margin-top: -2.25rem;
-mt-10margin-top: -2.5rem;
-mt-11margin-top: -2.75rem;
-mt-12margin-top: -3rem;
-mt-14margin-top: -3.5rem;
-mt-16margin-top: -4rem;
-mt-20margin-top: -5rem;
-mt-24margin-top: -6rem;
-mt-28margin-top: -7rem;
-mt-32margin-top: -8rem;
-mt-36margin-top: -9rem;
-mt-40margin-top: -10rem;
-mt-44margin-top: -11rem;
-mt-48margin-top: -12rem;
-mt-52margin-top: -13rem;
-mt-56margin-top: -14rem;
-mt-60margin-top: -15rem;
-mt-64margin-top: -16rem;
-mt-72margin-top: -18rem;
-mt-80margin-top: -20rem;
-mt-96margin-top: -24rem;
-mt-pxmargin-top: -1px;
-mr-0margin-right: 0px;
-mr-0.5margin-right: -0.125rem;
-mr-1margin-right: -0.25rem;
-mr-1.5margin-right: -0.375rem;
-mr-2margin-right: -0.5rem;
-mr-2.5margin-right: -0.625rem;
-mr-3margin-right: -0.75rem;
-mr-3.5margin-right: -0.875rem;
-mr-4margin-right: -1rem;
-mr-5margin-right: -1.25rem;
-mr-6margin-right: -1.5rem;
-mr-7margin-right: -1.75rem;
-mr-8margin-right: -2rem;
-mr-9margin-right: -2.25rem;
-mr-10margin-right: -2.5rem;
-mr-11margin-right: -2.75rem;
-mr-12margin-right: -3rem;
-mr-14margin-right: -3.5rem;
-mr-16margin-right: -4rem;
-mr-20margin-right: -5rem;
-mr-24margin-right: -6rem;
-mr-28margin-right: -7rem;
-mr-32margin-right: -8rem;
-mr-36margin-right: -9rem;
-mr-40margin-right: -10rem;
-mr-44margin-right: -11rem;
-mr-48margin-right: -12rem;
-mr-52margin-right: -13rem;
-mr-56margin-right: -14rem;
-mr-60margin-right: -15rem;
-mr-64margin-right: -16rem;
-mr-72margin-right: -18rem;
-mr-80margin-right: -20rem;
-mr-96margin-right: -24rem;
-mr-pxmargin-right: -1px;
-mb-0margin-bottom: 0px;
-mb-0.5margin-bottom: -0.125rem;
-mb-1margin-bottom: -0.25rem;
-mb-1.5margin-bottom: -0.375rem;
-mb-2margin-bottom: -0.5rem;
-mb-2.5margin-bottom: -0.625rem;
-mb-3margin-bottom: -0.75rem;
-mb-3.5margin-bottom: -0.875rem;
-mb-4margin-bottom: -1rem;
-mb-5margin-bottom: -1.25rem;
-mb-6margin-bottom: -1.5rem;
-mb-7margin-bottom: -1.75rem;
-mb-8margin-bottom: -2rem;
-mb-9margin-bottom: -2.25rem;
-mb-10margin-bottom: -2.5rem;
-mb-11margin-bottom: -2.75rem;
-mb-12margin-bottom: -3rem;
-mb-14margin-bottom: -3.5rem;
-mb-16margin-bottom: -4rem;
-mb-20margin-bottom: -5rem;
-mb-24margin-bottom: -6rem;
-mb-28margin-bottom: -7rem;
-mb-32margin-bottom: -8rem;
-mb-36margin-bottom: -9rem;
-mb-40margin-bottom: -10rem;
-mb-44margin-bottom: -11rem;
-mb-48margin-bottom: -12rem;
-mb-52margin-bottom: -13rem;
-mb-56margin-bottom: -14rem;
-mb-60margin-bottom: -15rem;
-mb-64margin-bottom: -16rem;
-mb-72margin-bottom: -18rem;
-mb-80margin-bottom: -20rem;
-mb-96margin-bottom: -24rem;
-mb-pxmargin-bottom: -1px;
-ml-0margin-left: 0px;
-ml-0.5margin-left: -0.125rem;
-ml-1margin-left: -0.25rem;
-ml-1.5margin-left: -0.375rem;
-ml-2margin-left: -0.5rem;
-ml-2.5margin-left: -0.625rem;
-ml-3margin-left: -0.75rem;
-ml-3.5margin-left: -0.875rem;
-ml-4margin-left: -1rem;
-ml-5margin-left: -1.25rem;
-ml-6margin-left: -1.5rem;
-ml-7margin-left: -1.75rem;
-ml-8margin-left: -2rem;
-ml-9margin-left: -2.25rem;
-ml-10margin-left: -2.5rem;
-ml-11margin-left: -2.75rem;
-ml-12margin-left: -3rem;
-ml-14margin-left: -3.5rem;
-ml-16margin-left: -4rem;
-ml-20margin-left: -5rem;
-ml-24margin-left: -6rem;
-ml-28margin-left: -7rem;
-ml-32margin-left: -8rem;
-ml-36margin-left: -9rem;
-ml-40margin-left: -10rem;
-ml-44margin-left: -11rem;
-ml-48margin-left: -12rem;
-ml-52margin-left: -13rem;
-ml-56margin-left: -14rem;
-ml-60margin-left: -15rem;
-ml-64margin-left: -16rem;
-ml-72margin-left: -18rem;
-ml-80margin-left: -20rem;
-ml-96margin-left: -24rem;
-ml-pxmargin-left: -1px;

为单侧添加外边距

使用 m{t|r|b|l}-{size} 功能类控制元素一侧的外边距。

例如,mt-6 将在元素顶部增加 1.5rem 的外边距,mr-4 将在元素右侧增加 1rem 的外边距,mb-8 将在元素底部增加 2rem 的外边距,ml-2 将在元素左侧增加 0.5rem 的外边距。

mt-8
mr-8
mb-8
ml-8
<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} 功能类控制元素水平方向的外边距。

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

添加垂直方向的外边距

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

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

为四个边添加外边距

使用 m-{size} 功能类控制元素四个边的外边距。

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

负外边距

使用 -m{side?}-{size} 功能类控制元素的负外边距。

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

响应式

要在特定的断点处控制元素的外边距,请在任何现有的 margin 功能类前添加 {screen}: 前缀。例如,将 md:my-8 类添加到一个元素中,就可以在中等及以上屏幕尺寸的情况下应用 my-8 功能。

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

关于 Tailwind 的响应式设计功能的更多信息,请查看 响应式设计 文档。


定制

外边距比例

默认情况下,Tailwind 为每个边和轴提供了 20 个固定的外边距功能类。

如果您想一次性自定义 padding、margin、width 和 height 的值,请使用您的 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',
      }
    }
  }

主题自定义文档 中了解更多关于自定义默认主题的信息。

Negative values

负值

如果您想添加额外的负页边距类(采取-m{side?}-{size}的形式),在配置文件中的键前加上破折号。

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

Tailwind 是足够聪明的,当它看到前面的破折号时,会生成像 -mx-72 这样的类,而不是像您可能期望的 mx--72

变体

默认情况下, 针对 margin 功能类,只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 margin 属性来控制为 margin 功能生成哪些变体。

例如,这个配置将生成 hover and focus 变体:

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

禁用

如果您不打算在您的项目中使用 margin 功能,您可以通过在配置文件的 corePlugins 部分将 margin 属性设置为 false 来完全禁用它们:

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