Tailwind CSS - 边框间距
Tailwind CSS border-spacing 是一个用于控制边框间距的实用类。
Tailwind CSS border-spacing 类
以下是 Tailwind CSS border-spacing 类的列表，它们提供了一种有效处理表格边框间距的方法。
| 类 | CSS 属性 |
|---|---|
| border-spacing-0 | border-spacing: 0px 0px; |
| border-spacing-x-0 | border-spacing: 0px var(--tw-border-spacing-y); |
| border-spacing-y-0 | border-spacing: var(--tw-border-spacing-x) 0px; |
| border-spacing-px | border-spacing: 1px 1px; |
| border-spacing-x-px | border-spacing: 1px var(--tw-border-spacing-y); |
| border-spacing-y-px | border-spacing: var(--tw-border-spacing-x) 1px; |
| border-spacing-0.5 | border-spacing: 0.125rem 0.125rem; |
| border-spacing-x-0.5 | border-spacing: 0.125rem var(--tw-border-spacing-y); |
| border-spacing-y-0.5 | border-spacing: var(--tw-border-spacing-x) 0.125rem; |
| border-spacing-1 | border-spacing: 0.25rem 0.25rem; |
| border-spacing-x-1 | border-spacing: 0.25rem var(--tw-border-spacing-y); |
| border-spacing-y-1 | border-spacing: var(--tw-border-spacing-x) 0.25rem; |
| border-spacing-1.5 | border-spacing: 0.375rem 0.375rem; |
| border-spacing-x-1.5 | border-spacing: 0.375rem var(--tw-border-spacing-y); |
| border-spacing-y-1.5 | border-spacing: var(--tw-border-spacing-x) 0.375rem; |
| border-spacing-2 | border-spacing: 0.5rem 0.5rem; |
| border-spacing-x-2 | border-spacing: 0.5rem var(--tw-border-spacing-y); |
| border-spacing-y-2 | border-spacing: var(--tw-border-spacing-x) 0.5rem; |
| border-spacing-2.5 | border-spacing: 0.625rem 0.625rem; |
| border-spacing-x-2.5 | border-spacing: 0.625rem var(--tw-border-spacing-y); |
| border-spacing-y-2.5 | border-spacing: var(--tw-border-spacing-x) 0.625rem; |
| border-spacing-3 | border-spacing: 0.75rem 0.75rem; |
| border-spacing-x-3 | border-spacing: 0.75rem var(--tw-border-spacing-y); |
| border-spacing-y-3 | border-spacing: var(--tw-border-spacing-x) 0.75rem; |
| border-spacing-3.5 | border-spacing: 0.875rem 0.875rem; |
| border-spacing-x-3.5 | border-spacing: 0.875rem var(--tw-border-spacing-y); |
| border-spacing-y-3.5 | border-spacing: var(--tw-border-spacing-x) 0.875rem; |
| border-spacing-4 | border-spacing: 1rem 1rem; |
| border-spacing-x-4 | border-spacing: 1rem var(--tw-border-spacing-y); |
| border-spacing-y-4 | border-spacing: var(--tw-border-spacing-x) 1rem; |
| border-spacing-5 | border-spacing: 1.25rem 1.25rem; |
| border-spacing-x-5 | border-spacing: 1.25rem var(--tw-border-spacing-y); |
| border-spacing-y-5 | border-spacing: var(--tw-border-spacing-x) 1.25rem; |
| border-spacing-6 | border-spacing: 1.5rem 1.5rem; |
| border-spacing-x-6 | border-spacing: 1.5rem var(--tw-border-spacing-y); |
| border-spacing-y-6 | border-spacing: var(--tw-border-spacing-x) 1.5rem; |
| border-spacing-7 | border-spacing: 1.75rem 1.75rem; |
| border-spacing-x-7 | border-spacing: 1.75rem var(--tw-border-spacing-y); |
| border-spacing-y-7 | border-spacing: var(--tw-border-spacing-x) 1.75rem; |
| border-spacing-8 | border-spacing: 2rem 2rem; |
| border-spacing-x-8 | border-spacing: 2rem var(--tw-border-spacing-y); |
| border-spacing-y-8 | border-spacing: var(--tw-border-spacing-x) 2rem; |
| border-spacing-9 | border-spacing: 2.25rem 2.25rem; |
| border-spacing-x-9 | border-spacing: 2.25rem var(--tw-border-spacing-y); |
| border-spacing-y-9 | border-spacing: var(--tw-border-spacing-x) 2.25rem; |
| border-spacing-10 | border-spacing: 2.5rem 2.5rem; |
| border-spacing-x-10 | border-spacing: 2.5rem var(--tw-border-spacing-y); |
| border-spacing-y-10 | border-spacing: var(--tw-border-spacing-x) 2.5rem; |
| border-spacing-11 | border-spacing: 2.75rem 2.75rem; |
| border-spacing-x-11 | border-spacing: 2.75rem var(--tw-border-spacing-y); |
| border-spacing-y-11 | border-spacing: var(--tw-border-spacing-x) 2.75rem; |
| border-spacing-12 | border-spacing: 3rem 3rem; |
| border-spacing-x-12 | border-spacing: 3rem var(--tw-border-spacing-y); |
| border-spacing-y-12 | border-spacing: var(--tw-border-spacing-x) 3rem; |
| border-spacing-14 | border-spacing: 3.5rem 3.5rem; |
| border-spacing-x-14 | border-spacing: 3.5rem var(--tw-border-spacing-y); |
| border-spacing-y-14 | border-spacing: var(--tw-border-spacing-x) 3.5rem; |
| border-spacing-16 | border-spacing: 4rem 4rem; |
| border-spacing-x-16 | border-spacing: 4rem var(--tw-border-spacing-y); |
| border-spacing-y-16 | border-spacing: var(--tw-border-spacing-x) 4rem; |
| border-spacing-20 | border-spacing: 5rem 5rem; |
| border-spacing-x-20 | border-spacing: 5rem var(--tw-border-spacing-y); |
| border-spacing-y-20 | border-spacing: var(--tw-border-spacing-x) 5rem; |
| border-spacing-24 | border-spacing: 6rem 6rem; |
| border-spacing-x-24 | border-spacing: 6rem var(--tw-border-spacing-y); |
| border-spacing-y-24 | border-spacing: var(--tw-border-spacing-x) 6rem; |
| border-spacing-28 | border-spacing: 7rem 7rem; |
| border-spacing-x-28 | border-spacing: 7rem var(--tw-border-spacing-y); |
| border-spacing-y-28 | border-spacing: var(--tw-border-spacing-x) 7rem; |
| border-spacing-32 | border-spacing: 8rem 8rem; |
| border-spacing-x-32 | border-spacing: 8rem var(--tw-border-spacing-y); |
| border-spacing-y-32 | border-spacing: var(--tw-border-spacing-x) 8rem; |
| border-spacing-36 | border-spacing: 9rem 9rem; |
| border-spacing-x-36 | border-spacing: 9rem var(--tw-border-spacing-y); |
| border-spacing-y-36 | border-spacing: var(--tw-border-spacing-x) 9rem; |
| border-spacing-40 | border-spacing: 10rem 10rem; |
| border-spacing-x-40 | border-spacing: 10rem var(--tw-border-spacing-y); |
| border-spacing-y-40 | border-spacing: var(--tw-border-spacing-x) 10rem; |
| border-spacing-44 | border-spacing: 11rem 11rem; |
| border-spacing-x-44 | border-spacing: 11rem var(--tw-border-spacing-y); |
| border-spacing-y-44 | border-spacing: var(--tw-border-spacing-x) 11rem; |
| border-spacing-48 | border-spacing: 12rem 12rem; |
| border-spacing-x-48 | border-spacing: 12rem var(--tw-border-spacing-y); |
| border-spacing-y-48 | border-spacing: var(--tw-border-spacing-x) 12rem; |
| border-spacing-52 | border-spacing: 13rem 13rem; |
| border-spacing-x-52 | border-spacing: 13rem var(--tw-border-spacing-y); |
| border-spacing-y-52 | border-spacing: var(--tw-border-spacing-x) 13rem; |
| border-spacing-56 | border-spacing: 14rem 14rem; |
| border-spacing-x-56 | border-spacing: 14rem var(--tw-border-spacing-y); |
| border-spacing-y-56 | border-spacing: var(--tw-border-spacing-x) 14rem; |
| border-spacing-60 | border-spacing: 15rem 15rem; |
| border-spacing-x-60 | border-spacing: 15rem var(--tw-border-spacing-y); |
| border-spacing-y-60 | border-spacing: var(--tw-border-spacing-x) 15rem; |
| border-spacing-64 | border-spacing: 16rem 16rem; |
| border-spacing-x-64 | border-spacing: 16rem var(--tw-border-spacing-y); |
| border-spacing-y-64 | border-spacing: var(--tw-border-spacing-x) 16rem; |
| border-spacing-72 | border-spacing: 18rem 18rem; |
| border-spacing-x-72 | border-spacing: 18rem var(--tw-border-spacing-y); |
| border-spacing-y-72 | border-spacing: var(--tw-border-spacing-x) 18rem; |
| border-spacing-80 | border-spacing: 20rem 20rem; |
| border-spacing-x-80 | border-spacing: 20rem var(--tw-border-spacing-y); |
| border-spacing-y-80 | border-spacing: var(--tw-border-spacing-x) 20rem; |
| border-spacing-96 | border-spacing: 24rem 24rem; |
| border-spacing-x-96 | border-spacing: 24rem var(--tw-border-spacing-y); |
| border-spacing-y-96 | border-spacing: var(--tw-border-spacing-x) 24rem; |
Tailwind CSS 边框折叠类的功能
- border-spacing-* 用于在单个命令中设置两个轴上的边框间距。
- border-spacing-x-* 用于设置 X 轴上的边框间距。
- border-spacing-y-* 用于设置 Y 轴上的边框间距。
- border-spacing-px 此类将两个轴上的边框间距设置为 1px。
- border-spacing-x-px 此类将 X 轴上的边框间距设置为 1px。
- border-spacing-y-px 此类将Y 轴。
注意: 表中的 * 可以替换为上述任何数字。
Tailwind CSS 边框间距类示例
以下示例将说明 Tailwind CSS 边框间距类实用程序。
设置表格边框间距
如果将表格单元格设置为单独的边框，我们可以使用 border-spacing-* 实用程序来设置单元格边框之间的间距。
示例
<!DOCTYPE html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h1 class="text-3xl mb-3">
Tailwind CSS Border Spacing
</h1>
<table class="border-separate border-spacing w-full
border border-slate-500">
<thead>
<tr>
<th class="bg-green-600 border
border-slate-600 w-1/3">
Acronym
</th>
<th class="bg-green-600 border
border-slate-600 w-2/3">
Stand For
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green-300 border
border-slate-700">
HTML
</td>
<td class="bg-green-300 border
border-slate-700">
HyperText markup Language
</td>
</tr>
<tr>
<td class="bg-green-300 border
border-slate-700">
CSS
</td>
<td class="bg-green-300 border
border-slate-700">
Cascading Style Sheets
</td>
</tr>
</tbody>
</table>
</body>
</html>
按轴设置表格边框间距
如果设置为单独的边框，我们可以使用 border-spacing-x-* 和 border-spacing-y-* 实用程序来设置表格单元格边框之间的间距。
示例
<!DOCTYPE html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h1 class="text-3xl mb-3">
Tailwind CSS Border Spacing
</h1>
<table class="border-separate border-spacing-x-2
border-spacing-y-4 w-full
border border-slate-500">
<thead>
<tr>
<th class="bg-green-600 border
border-slate-600 w-1/3">
Acronym
</th>
<th class="bg-green-600 border
border-slate-600 w-2/3">
Stand For
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green-300 border
border-slate-700">
HTML
</td>
<td class="bg-green-300 border
border-slate-700">
HyperText markup Language
</td>
</tr>
<tr>
<td class="bg-green-300 border
border-slate-700">
CSS
</td>
<td class="bg-green-300 border
border-slate-700">
Cascading Style Sheets
</td>
</tr>
</tbody>
</table>
</body>
</html>
