Tailwind CSS - 外邊距

上一頁
下一頁

外邊距是一個重要的屬性，用於在任何元素周圍建立外部空間。可以使用 Tailwind CSS 外邊距類替換CSS margin 屬性。

Tailwind CSS 外邊距類

下面提到的類可用於控制元素的外邊距。

類名 描述
m-* 此類名帶有有效值，例如 m-0、m-0.5、m-1、m-1.5 等，可用於新增外邊距。
my-* 此類名帶有有效值，例如 my-0、my-0.5、my-1、my-1.5 等，可用於新增垂直外邊距。
mx-* 此類名帶有有效值，例如 mx-0、mx-0.5、mx-1、mx-1.5 等，可用於新增水平外邊距。
mt-* 此類名帶有有效值，例如 mt-0、mt-0.5、mt-1、mt-1.5 等，可用於新增上外邊距。
mr-* 此類名帶有有效值，例如 mr-0、mr-0.5、mr-1、mr-1.5 等，可用於新增右外邊距。
mb-* 此類名帶有有效值，例如 mb-0、mb-0.5、mb-1、mb-1.5 等，可用於新增下外邊距。
ml-* 此類名帶有有效值，例如 ml-0、ml-0.5、ml-1、ml-1.5 等，可用於新增左外邊距。
ms-* 此類名帶有有效值，例如 ms-0、ms-0.5、ms-1、ms-1.5 等，可用於新增內聯起始外邊距。
me-* 此類名帶有有效值，例如 me-0、me-0.5、me-1、me-1.5 等，可用於新增內聯結束外邊距。

注意：*（星號）的值可以是 0 到任何有效的可接受數字。

Tailwind CSS 外邊距類示例

在下面的示例中，我們看到了上面提到的幾個類的用例。您可以透過更改程式碼自己嘗試不同的值。

向所有側新增外邊距

在本文中，我們將使用 Tailwind CSS 的'm-**'類，為每個元素的所有側建立具有不同值的外邊距。

示例

<!DOCTYPE html>
<html>
<head>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio"></script>
</head>

<body>
    <div class="m-5">
        <p class="text-3xl font-bold">
            Tailwind CSS Margin
        </p>
        <p>
            The light green section of the below
            squares is the margin area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Margin Class is Used on Child div-->
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="m-0 bg-green-600 
                            w-16 h-16">m-0</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="m-1 bg-green-600 
                            w-16 h-16">m-1</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="m-2 bg-green-600 
                            w-16 h-16">m-2</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="m-4 bg-green-600 
                            w-16 h-16">m-4</div>
            </div>
        </div>
</body>

</html>

向單側新增外邊距

在下面的示例中，我們使用了四個不同的類，例如'mt-*'、'mr-*'、'mb-*'和'ml-*'，分別設定四個不同元素的單側外邊距。

示例

<!DOCTYPE html>
<html>
<head>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio"></script>
</head>

<body>
    <div class="m-5">
        <p class="text-3xl font-bold">
            Tailwind CSS Margin
        </p>
        <p>
            The light green section of the below
            squares is the margin area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Margin Class is Used on Child div -->
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="mt-4 bg-green-600 
                            w-16 h-16">mt-4</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="mr-4 bg-green-600 
                            w-16 h-16">mr-4</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="mb-4 bg-green-600 
                            w-16 h-16">mb-4</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="ml-4 bg-green-600 
                            w-16 h-16">ml-4</div>
            </div>
        </div>
</body>

</html>

X 軸外邊距

在本例中，我們將使用'mx-*'類，為不同的元素使用不同的值。

示例

<!DOCTYPE html>
<html>
<head>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio"></script>
</head>

<body>
    <div class="m-5">
        <p class="text-3xl font-bold">
            Tailwind CSS Margin
        </p>
        <p>
            The light green section of the below
            squares is the margin area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Margin Class is Used on Child div -->
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="mx-4 bg-green-600 
                            w-16 h-16">mx-4</div>
            </div>
        </div>
</body>

</html>

Y 軸外邊距

在本例中，我們將使用'my-*'類，為不同的元素使用不同的值。

示例

<!DOCTYPE html>
<html>

<head>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio"></script>
</head>

<body>
    <div class="m-5">
        <p class="text-3xl font-bold">
            Tailwind CSS Margin
        </p>
        <p>
            The light green section of the below
            squares is the margin area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Margin Class is Used on Child div -->
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="y-4 bg-green-600 
                            w-16 h-16">my-4</div>
            </div>
        </div>
</body>

</html>

邏輯外邊距

在下面的示例中，我們使用'ms-*'和'me-*'類，根據內容方向設定外邊距。

示例

<!DOCTYPE html>
<html>
<head>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio">   </script>
</head>

<body>
    <div class="m-5">
        <p class="text-3xl font-bold">
            Tailwind CSS Margin
        </p>
        <p>
            The light green section of the below
            squares is the margin area.
        </p>
        <div class="text-center" dir="ltr">
            <!-- Tailwind CSS Margin Class is Used on Child div -->
            <div class="m-2 border border-green-600 
                        bg-green-200 w-max">
                <div class="ms-4 bg-green-600 w-16 h-16">ms-4</div>
            </div>
            <div class="m-2 border border-green-600 
                        bg-green-200 w-max">
                <div class="me-4 bg-green-600 w-16 h-16">me-4</div>
            </div>
        </div>
        <div class="text-center" dir="rtl">
            <!-- Tailwind CSS Margin Class is Used on Child div -->
            <div class="m-2 border border-green-600 
                        bg-green-200 w-max">
                <div class="ms-4 bg-green-600 w-16 h-16">ms-4</div>
            </div>
            <div class="m-2 border border-green-600 
                        bg-green-200 w-max">
                <div class="me-4 bg-green-600 w-16 h-16">me-4</div>
            </div>
        </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告