盒子模型

 

Padding

1. 所有方向的内边距：

   • p-{size}：这个类设置所有四个方向的内边距。例如，p-4 会在所有方向上应用 1rem 的内边距。

   • 

      

2. 垂直方向的内边距：

   • py-{size}：这个类仅设置元素的上边距和下边距。例如，py-2 会在垂直方向上应用 0.5rem 的内边距。

3. 水平方向的内边距：

   • px-{size}：这个类仅设置元素的左边距和右边距。例如，px-3 会在水平方向上应用 0.75rem 的内边距。

4. 单独方向的内边距：

   • pt-{size}、pr-{size}、pb-{size}、pl-{size}：这些类分别用于设置元素的上、右、下、左方向的内边距。例如，pt-6 会仅在上方应用 1.5rem 的内边距。

5. 响应式设计：

   • 你可以通过前缀来控制不同断点下的内边距，例如 md:p-8 在中等尺寸的屏幕上应用 2rem 的内边距。

6. Proportional Padding：

   • Tailwind CSS 还支持比例内边距，如 p-1/2，这会设置内边距为父元素宽度的一半。

Margin

1. 所有方向的外边距：

   • m-{size}：这个类设置元素在所有四个方向的外边距。例如，m-4 会在所有方向上添加 1rem 的外边距。

2. 单独方向的外边距：

   • mt-{size}、mr-{size}、mb-{size}、ml-{size}：这些类分别设置元素的上、右、下、左方向的外边距。例如，mt-2 会在顶部添加 0.5rem 的外边距。

3. 垂直方向的外边距：

   • my-{size}：这个类设置元素的上边距和下边距。例如，my-3 会在垂直方向上添加 0.75rem 的外边距。

4. 水平方向的外边距：

   • mx-{size}：这个类设置元素的左边距和右边距。例如，mx-5 会在水平方向上添加 1.25rem 的外边距。

   • 

      

5. 自动外边距：

   • mx-auto：这个类设置元素的左右外边距为自动，通常用于使元素水平居中。
   • my-auto：这个类设置元素的上下外边距为自动，可以用于在垂直方向上居中元素，但需配合其他布局类使用。

6. 负外边距：

   • mt-{size}、mr-{size}、mb-{size}、ml-{size}、mx-{size}、my-{size}：在这些类前加负号可以创建负外边距，如 mt--4 会在顶部添加 -1rem 的外边距。

Space Between

再说

 

边框border

再说