Tailwind CSS 边距

什么是 Tailwind CSS？

Tailwind CSS 是一种实用优先的 CSS 框架，它使开发人员能够快速构建现代网站和应用程序，同时提供了高度可定制的设计选项。

什么是 Tailwind CSS 边距？

边距是指定 HTML 元素周围的空间的 CSS 属性。Tailwind CSS 提供了一组边距类，可以快速添加各种边距样式。

外边距

• m-：添加所有方向的外边距，例如 m-4 表示添加 4 个像素的外边距。
• mt-：添加顶部外边距，例如 mt-4 表示添加 4 个像素的顶部外边距。
• mr-：添加右侧外边距，例如 mr-4 表示添加 4 个像素的右侧外边距。
• mb-：添加底部外边距，例如 mb-4 表示添加 4 个像素的底部外边距。
• ml-：添加左侧外边距，例如 ml-4 表示添加 4 个像素的左侧外边距。
• mx-：添加水平方向的外边距，例如 mx-4 表示添加 4 个像素的左右外边距。
• my-：添加垂直方向的外边距，例如 my-4 表示添加 4 个像素的上下外边距。

内边距

内边距指定 HTML 元素内部的空间的 CSS 属性。

• p-：添加所有方向的内边距，例如 p-4 表示添加 4 个像素的内边距。
• pt-：添加顶部内边距，例如 pt-4 表示添加 4 个像素的顶部内边距。
• pr-：添加右侧内边距，例如 pr-4 表示添加 4 个像素的右侧内边距。
• pb-：添加底部内边距，例如 pb-4 表示添加 4 个像素的底部内边距。
• pl-：添加左侧内边距，例如 pl-4 表示添加 4 个像素的左侧内边距。
• px-：添加水平方向的内边距，例如 px-4 表示添加 4 个像素的左右内边距。
• py-：添加垂直方向的内边距，例如 py-4 表示添加 4 个像素的上下内边距。

如何使用 Tailwind CSS 边距？

在 HTML 元素中添加 class 属性，并将需要的边距类添加到其中即可。

<div class="m-4 p-6 bg-gray-200">
  <p class="mt-2 text-lg leading-5 font-semibold">A paragraph.</p>
</div>

上面的代码将创建一个带有 4 个像素外边距和 6 个像素内边距的 div 元素，并带有灰色的背景。其中，段落元素具有 2 个像素的顶部外边距和 5 个像素的字号和字体样式。

由于 Tailwind CSS 提供了高度可定制的设计选项，因此可以根据需要使用其他边距类来创建各种外观和风格。