Tailwind CSS - 边框间距

上一页
下一页

Tailwind CSS 边框间距是一个用于控制边框之间间距的实用程序类。

Tailwind CSS 边框间距类

以下是Tailwind CSS 边框间距类列表，它提供了一种有效处理表格边框间距的方法。

类 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);
边框间距 Y 方向 8rem border-spacing: var(--tw-border-spacing-x) 2rem;
边框间距 X 方向 9rem border-spacing: 2.25rem 2.25rem;
边框间距 X 方向 9rem border-spacing: 2.25rem var(--tw-border-spacing-y);
边框间距 Y 方向 9rem border-spacing: var(--tw-border-spacing-x) 2.25rem;
边框间距 10rem border-spacing: 2.5rem 2.5rem;
边框间距 X 方向 10rem border-spacing: 2.5rem var(--tw-border-spacing-y);
边框间距 Y 方向 10rem border-spacing: var(--tw-border-spacing-x) 2.5rem;
边框间距 11rem border-spacing: 2.75rem 2.75rem;
边框间距 X 方向 11rem border-spacing: 2.75rem var(--tw-border-spacing-y);
边框间距 Y 方向 11rem border-spacing: var(--tw-border-spacing-x) 2.75rem;
边框间距 12rem border-spacing: 3rem 3rem;
边框间距 X 方向 12rem border-spacing: 3rem var(--tw-border-spacing-y);
边框间距 Y 方向 12rem border-spacing: var(--tw-border-spacing-x) 3rem;
边框间距 14rem border-spacing: 3.5rem 3.5rem;
边框间距 X 方向 14rem border-spacing: 3.5rem var(--tw-border-spacing-y);
边框间距 Y 方向 14rem border-spacing: var(--tw-border-spacing-x) 3.5rem;
边框间距 16rem border-spacing: 4rem 4rem;
边框间距 X 方向 16rem border-spacing: 4rem var(--tw-border-spacing-y);
边框间距 Y 方向 16rem border-spacing: var(--tw-border-spacing-x) 4rem;
边框间距 20rem border-spacing: 5rem 5rem;
边框间距 X 方向 20rem border-spacing: 5rem var(--tw-border-spacing-y);
边框间距 Y 方向 20rem border-spacing: var(--tw-border-spacing-x) 5rem;
边框间距 24rem border-spacing: 6rem 6rem;
边框间距 X 方向 24rem border-spacing: 6rem var(--tw-border-spacing-y);
边框间距 Y 方向 24rem border-spacing: var(--tw-border-spacing-x) 6rem;
边框间距 28rem border-spacing: 7rem 7rem;
边框间距 X 方向 28rem border-spacing: 7rem var(--tw-border-spacing-y);
边框间距 Y 方向 28rem border-spacing: var(--tw-border-spacing-x) 7rem;
边框间距 32rem border-spacing: 8rem 8rem;
边框间距 X 方向 32rem border-spacing: 8rem var(--tw-border-spacing-y);
边框间距 Y 方向 32rem border-spacing: var(--tw-border-spacing-x) 8rem;
边框间距 36rem border-spacing: 9rem 9rem;
边框间距 X 方向 36rem border-spacing: 9rem var(--tw-border-spacing-y);
边框间距 Y 方向 36rem border-spacing: var(--tw-border-spacing-x) 9rem;
边框间距 40rem border-spacing: 10rem 10rem;
边框间距 X 方向 40rem border-spacing: 10rem var(--tw-border-spacing-y);
边框间距 Y 方向 40rem border-spacing: var(--tw-border-spacing-x) 10rem;
边框间距 44rem border-spacing: 11rem 11rem;
边框间距 X 方向 44rem border-spacing: 11rem var(--tw-border-spacing-y);
边框间距 Y 方向 44rem border-spacing: var(--tw-border-spacing-x) 11rem;
边框间距 48rem border-spacing: 12rem 12rem;
边框间距 X 方向 48rem border-spacing: 12rem var(--tw-border-spacing-y);
边框间距 Y 方向 48rem border-spacing: var(--tw-border-spacing-x) 12rem;
边框间距 52rem border-spacing: 13rem 13rem;
边框间距 X 方向 52rem border-spacing: 13rem var(--tw-border-spacing-y);
边框间距 Y 方向 52rem border-spacing: var(--tw-border-spacing-x) 13rem;
边框间距 56rem border-spacing: 14rem 14rem;
边框间距 X 方向 56rem border-spacing: 14rem var(--tw-border-spacing-y);
边框间距 Y 方向 56rem border-spacing: var(--tw-border-spacing-x) 14rem;
边框间距 60rem border-spacing: 15rem 15rem;
边框间距 X 方向 60rem border-spacing: 15rem var(--tw-border-spacing-y);
边框间距 Y 方向 60rem border-spacing: var(--tw-border-spacing-x) 15rem;
边框间距 64rem border-spacing: 16rem 16rem;
边框间距 X 方向 64rem border-spacing: 16rem var(--tw-border-spacing-y);
边框间距 Y 方向 64rem border-spacing: var(--tw-border-spacing-x) 16rem;
边框间距 72rem border-spacing: 18rem 18rem;
边框间距 X 方向 72rem border-spacing: 18rem var(--tw-border-spacing-y);
边框间距 Y 方向 72rem border-spacing: var(--tw-border-spacing-x) 18rem;
边框间距 80rem border-spacing: 20rem 20rem;
边框间距 X 方向 80rem border-spacing: 20rem var(--tw-border-spacing-y);
边框间距 Y 方向 80rem border-spacing: var(--tw-border-spacing-x) 20rem;
边框间距 96rem border-spacing: 24rem 24rem;
边框间距 X 方向 96rem border-spacing: 24rem var(--tw-border-spacing-y);
边框间距 Y 方向 96rem 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 轴上设置 1px 的边框间距。

注意：* 可以替换为表格中提到的任何数字。

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>
打印页面
上一页
下一页
广告