Tailwind CSS - Margin
边距是一个重要属性，用于在任何元素上创建外部空间。 CSS 边距属性 可以用 Tailwind CSS 边距类替换。
Tailwind CSS Margin 边距类
以下提到的类可用于控制元素的边距。
| 类 | 描述 |
|---|---|
| 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 等有效值，可用于在行内末尾添加外边距。 |
注意: * (astrick) 的值可以是 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>
