间距
用于控制元素边距的实用工具。
类 | 样式 |
---|---|
m-<数字> | margin: calc(var(--spacing) * <数字>); |
-m-<数字> | margin: calc(var(--spacing) * -<数字>); |
m-(<自定义属性>) | margin: var(<自定义属性>); |
m-[<值>] | margin: <值>; |
mx-<数字> | margin-inline: calc(var(--spacing) * <数字>); |
-mx-<数字> | margin-inline: calc(var(--spacing) * -<数字>); |
mx-(<自定义属性>) | margin-inline: var(<自定义属性>); |
mx-[<值>] | margin-inline: <值>; |
my-<数字> | margin-block: calc(var(--spacing) * <数字>); |
-my-<数字> | margin-block: calc(var(--spacing) * -<数字>); |
my-(<自定义属性>) | margin-block: var(<自定义属性>); |
my-[<值>] | margin-block: <值>; |
ms-<数字> | margin-inline-start: calc(var(--spacing) * <数字>); |
-ms-<数字> | margin-inline-start: calc(var(--spacing) * -<数字>); |
ms-(<自定义属性>) | margin-inline-start: var(<自定义属性>); |
ms-[<值>] | margin-inline-start: <值>; |
me-<数字> | margin-inline-end: calc(var(--spacing) * <数字>); |
-me-<数字> | margin-inline-end: calc(var(--spacing) * -<数字>); |
me-(<自定义属性>) | margin-inline-end: var(<自定义属性>); |
me-[<值>] | margin-inline-end: <值>; |
mt-<数字> | margin-top: calc(var(--spacing) * <数字>); |
-mt-<数字> | margin-top: calc(var(--spacing) * -<数字>); |
mt-(<自定义属性>) | margin-top: var(<自定义属性>); |
mt-[<值>] | margin-top: <值>; |
mr-<数字> | margin-right: calc(var(--spacing) * <数字>); |
-mr-<数字> | margin-right: calc(var(--spacing) * -<数字>); |
mr-(<自定义属性>) | margin-right: var(<自定义属性>); |
mr-[<值>] | margin-right: <值>; |
mb-<数字> | margin-bottom: calc(var(--spacing) * <数字>); |
-mb-<数字> | margin-bottom: calc(var(--spacing) * -<数字>); |
mb-(<自定义属性>) | margin-bottom: var(<自定义属性>); |
mb-[<值>] | margin-bottom: <值>; |
ml-<数字> | margin-left: calc(var(--spacing) * <数字>); |
-ml-<数字> | margin-left: calc(var(--spacing) * -<数字>); |
ml-(<自定义属性>) | margin-left: var(<自定义属性>); |
ml-[<值>] | margin-left: <值>; |
space-x-<数字> | & > :not(:last-child) { margin-inline-start: calc(var(--spacing) * <数字>); margin-inline-end: calc(var(--spacing) * <数字>); }; |
-space-x-<数字> | & > :not(:last-child) { margin-inline-start: calc(var(--spacing) * -<数字>); margin-inline-end: calc(var(--spacing) * -<数字>); }; |
space-x-(<自定义属性>) | & > :not(:last-child) { margin-inline-start: <自定义属性>; margin-inline-end: <自定义属性>); }; |
space-x-[<值>] | & > :not(:last-child) { margin-inline-start: <值>; margin-inline-end: <值>); }; |
space-y-<数字> | & > :not(:last-child) { margin-block-start: calc(var(--spacing) * <数字>); margin-block-end: calc(var(--spacing) * <数字>); }; |
-space-y-<数字> | & > :not(:last-child) { margin-block-start: calc(var(--spacing) * -<数字>); margin-block-end: calc(var(--spacing) * -<数字>); }; |
space-y-(<自定义属性>) | & > :not(:last-child) { margin-block-start: <自定义属性>; margin-block-end: <自定义属性>); }; |
space-y-[<值>] | & > :not(:last-child) { margin-block-start: <值>; margin-block-end: <值>); }; |
space-x-reverse | & > :not(:last-child)) { --tw-space-x-reverse: 1; } |
space-y-reverse | & > :not(:last-child)) { --tw-space-y-reverse: 1; } |
使用 m-<数字>
工具类,如 m-4
和 m-8
来控制元素所有边的外边距
<div class="m-8 ...">m-8</div>
使用 mt-<数字>
、mr-<数字>
、mb-<数字>
和 ml-<数字>
工具类,如 ml-2
和 mt-6
来控制元素单边的外边距
<div class="mt-6 ...">mt-6</div><div class="mr-4 ...">mr-4</div><div class="mb-8 ...">mb-8</div><div class="ml-2 ...">ml-2</div>
使用 mx-<数字>
工具类,如 mx-4
和 mx-8
来控制元素的水平外边距
<div class="mx-8 ...">mx-8</div>
使用 my-<数字>
工具类,如 my-4
和 my-8
来控制元素的垂直外边距
<div class="my-8 ...">my-8</div>
要使用负的外边距值,请在类名前面加上一个破折号,将其转换为负值
<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div><div class="-mt-8 bg-sky-300 ...">-mt-8</div>
使用 ms-<数字>
和 me-<数字>
工具类,如 ms-4
和 me-8
来设置 margin-inline-start
和 margin-inline-end
逻辑属性
从左到右
从右到左
<div> <div dir="ltr"> <div class="ms-8 ...">ms-8</div> <div class="me-8 ...">me-8</div> </div> <div dir="rtl"> <div class="ms-8 ...">ms-8</div> <div class="me-8 ...">me-8</div> </div></div>
使用 space-x-<数字>
和 space-y-<数字>
工具类,如 space-x-4
和 space-y-8
来控制元素之间的间距
<div class="flex space-x-4 ..."> <div>01</div> <div>02</div> <div>03</div></div>
如果你的元素是反向排列的(例如使用 flex-row-reverse
或 flex-col-reverse
),请使用 space-x-reverse
或 space-y-reverse
工具类来确保间距添加到每个元素的正确一侧
<div class="flex flex-row-reverse space-x-4 space-x-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>
间距工具类实际上只是在组中给除最后一个元素之外的所有元素添加外边距的快捷方式,并且不适合处理复杂情况,如网格、换行的布局或子元素以复杂的自定义顺序而不是其自然的 DOM 顺序渲染的情况。
对于这些情况,最好在可能的情况下使用 间隙工具类,或者给每个元素添加外边距,并在父元素上使用匹配的负外边距。
此外,间距工具类不适用于 分割线工具类。对于这些情况,请考虑改为给子元素添加外边距/内边距工具类。
使用类似以下的工具类 m-[<值>]
,mx-[<值>]
,和 mb-[<值>]
来设置边距基于完全自定义的值
<div class="m-[5px] ..."> <!-- ... --></div>
对于 CSS 变量,你还可以使用 m-(<自定义属性>)
语法
<div class="m-(--my-margin) ..."> <!-- ... --></div>
这只是 m-[var(<自定义属性>)]
的简写形式,它会自动为你添加 var()
函数。
前缀一个 margin
工具类 使用一个断点变体,如 md:
,以便仅在中等 屏幕尺寸及以上时应用该工具类
<div class="mt-4 md:mt-8 ..."> <!-- ... --></div>
在 变体文档 中了解有关使用变体的更多信息。
m-<数字>
,mx-<数字>
,my-<数字>
,ms-<数字>
,me-<数字>
,mt-<数字>
,mr-<数字>
,mb-<数字>
,ml-<数字>
工具类由 --spacing
主题变量驱动,你可以在自己的主题中自定义它 m-<数字>
,mx-<数字>
,my-<数字>
,ms-<数字>
,me-<数字>
,mt-<数字>
,mr-<数字>
,mb-<数字>
,和 ml-<数字>
工具类由 --spacing
主题变量驱动,你可以在自己的主题中自定义它
@theme { --spacing: 1px; }
在 主题变量文档 中了解有关自定义间距比例的更多信息。