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>
列印頁面
上一頁
下一頁
廣告