1. 布局
  2. top / right / bottom / left

布局

top / right / bottom / left

用于控制定位元素位置的实用工具。

类名样式
inset-<number>
inset: calc(var(--spacing) * <number>);
-inset-<number>
inset: calc(var(--spacing) * -<number>);
inset-<fraction>
inset: calc(<fraction> * 100%);
-inset-<fraction>
inset: calc(<fraction> * -100%);
inset-px
inset: 1px;
-inset-px
inset: -1px;
inset-full
inset: 100%;
-inset-full
inset: -100%;
inset-auto
inset: auto;
inset-(<custom-property>)
inset: var(<custom-property>);

示例

基本示例

使用 top-<number>right-<number>bottom-<number>left-<number>inset-<number> 实用程序(如 top-0bottom-4)来设置定位元素的水平或垂直位置

01
02
03
04
05
06
07
08
09
<!-- Pin to top left corner -->
<div class="relative size-32 ...">
<div class="absolute top-0 left-0 size-16 ...">01</div>
</div>
<!-- Span top edge -->
<div class="relative size-32 ...">
<div class="absolute inset-x-0 top-0 h-16 ...">02</div>
</div>
<!-- Pin to top right corner -->
<div class="relative size-32 ...">
<div class="absolute top-0 right-0 size-16 ...">03</div>
</div>
<!-- Span left edge -->
<div class="relative size-32 ...">
<div class="absolute inset-y-0 left-0 w-16 ...">04</div>
</div>
<!-- Fill entire parent -->
<div class="relative size-32 ...">
<div class="absolute inset-0 ...">05</div>
</div>
<!-- Span right edge -->
<div class="relative size-32 ...">
<div class="absolute inset-y-0 right-0 w-16 ...">06</div>
</div>
<!-- Pin to bottom left corner -->
<div class="relative size-32 ...">
<div class="absolute bottom-0 left-0 size-16 ...">07</div>
</div>
<!-- Span bottom edge -->
<div class="relative size-32 ...">
<div class="absolute inset-x-0 bottom-0 h-16 ...">08</div>
</div>
<!-- Pin to bottom right corner -->
<div class="relative size-32 ...">
<div class="absolute right-0 bottom-0 size-16 ...">09</div>
</div>

使用负值

要使用负 top/right/bottom/left 值,请在类名前面加上破折号以将其转换为负值

<div class="relative size-32 ...">
<div class="absolute -top-4 -left-4 size-14 ..."></div>
</div>

使用逻辑属性

使用 start-<number>end-<number> 实用程序(如 start-0end-4)来设置 inset-inline-startinset-inline-end 逻辑属性,这些属性根据文本方向映射到左侧或右侧

从左到右

从右到左

<div dir="ltr">
<div class="relative size-32 ...">
<div class="absolute start-0 top-0 size-14 ..."></div>
</div>
<div>
<div dir="rtl">
<div class="relative size-32 ...">
<div class="absolute start-0 top-0 size-14 ..."></div>
</div>
<div></div>
</div>
</div>
</div>

为了获得更多控制,您还可以使用 LTR 和 RTL 修饰符,以根据当前的文本方向有条件地应用特定样式。

使用自定义值

使用如下实用程序: inset-[<value>]top-[<value>]来设置position基于完全自定义的值

<div class="inset-[3px] ...">
<!-- ... -->
</div>

对于 CSS 变量,您还可以使用 inset-(<custom-property>) 语法

<div class="inset-(--my-position) ...">
<!-- ... -->
</div>

这只是 inset-[var(<custom-property>)] 的简写形式,它会自动为您添加 var() 函数。

响应式设计

前缀 insetinset-xinset-ystartendtopleftbottomright实用工具 带有断点变体(如 md:),以便仅在中等 屏幕尺寸及以上尺寸应用该实用工具

<div class="top-4 md:top-6 ...">
<!-- ... -->
</div>

了解有关在变体文档中使用变体的更多信息。

自定义您的主题

inset-<number>inset-x-<number>inset-y-<number>start-<number>end-<number>top-<number>left-<number>bottom-<number>right-<number>实用程序由 --spacing 主题变量驱动,该变量可以在您自己的主题中进行自定义

@theme {
--spacing: 1px;
}

了解有关在主题变量文档中自定义间距比例的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策