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 外边距类示例

在下面的示例中，我们看到了上面提到的几个类的用例。您可以通过更改代码自己尝试不同的值。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

向所有侧添加外边距

在本文中，我们将使用 Tailwind CSS 的'm-**'类，为每个元素的所有侧创建具有不同值的外边距。

示例

Open Compiler
<!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-*'，分别设置四个不同元素的单侧外边距。

示例

Open Compiler
<!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-*'类，为不同的元素使用不同的值。

示例

Open Compiler
<!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-*'类，为不同的元素使用不同的值。

示例

Open Compiler
<!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-*'类，根据内容方向设置外边距。

示例

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