Tailwind Spacing

最新推荐文章于 2024-05-21 22:40:14 发布

JunChow520

最新推荐文章于 2024-05-21 22:40:14 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/JunChow520/article/details/106491885

版权

单位（size）

Tailwind间距单位采用rem，rem是相对于HTML的根元素<html>标签而言的，只需在根元素确定一个参考值，即可计算出不同rem的大小。

html{ font-size: 16px; }

例如：浏览器默认字号为16px，常见px于rem单位之间的转换。

px	rem
4px	4/16=.25rem
8px	8/16=.5rem
12px	12/16=.75rem
14px	14/16=0.875rem
16px	16/16=1rem
18px	18/16=1.125rem
20px	20/16=1.25rem
24px	24/16=1.5rem
30px	30/16=1.875rem
32px	32/16=2rem

Tailwind中尺寸中数字所表示的实际单位，以浏览器中默认的16px为参考。

大小	rem	px
0	0rem	0px
1	0.25rem	4px
2	0.5rem	8px
3	0.75rem	12px
4	1rem	16px

外边距（margin）

Tailwind外边距margin采用m-{t|r|b|l}-{size}命名工具类的方式为元素指定外边距，外边距的大小单位为rem。如果是负边距则采用-m-{t|r|b|l}-{size}命名方式。

命名	属性
m	margin
mt	margin-top
mr	margin-right
mb	margin-bottom
ml	margin-left
m-auto	margin:auto;
mx	margin-left、margin-right
my	margin-top、margin-bottom
mx-auto	margin-left:auto; margin-right:auto;
my-auto	margin-top:auto; margin-bottom:auto;
m-px	margin:1px;
mt-px	margin-top:1px;
mr-px	margin-right:1px;
mb-px	margin-bottom:1px;
ml-px	margin-left;1px;

内边距（padding）

Tailwind采用p{t|r|b|l}-{size}命名工具类为元素指定的一侧添加内边距（填充），padding的单位为rem，每一份为0.25rem即1/4个rem单位。

命名	属性
p	padding
px	padding-left、padding-right
py	padding-top、padding-bottom
pl	padding-left
pr	padding-right
pt	padding-top
pb	padding-bottom
pl-px	padding-left:1px
pr-px	padding-right:1px
pt-px	padding-top:1px
pb-px	padding-bottom:1px

间距（space between）

Tailwind中的space-是使用margin属性在父级容器中为子类设置左侧外间距margin-left和顶部外间距margin-top，典型的格式为space-{x|y}-{size} > * + *，主要目的是容器内子类统一设置水平和垂直的间距。

类名	属性
space-x-{size}	margin-left:{size};
-space-x-{size}	margin-left:-{size};
space-y-{size}	margin-top:{size};
-space-y-{size}	margin-top:-{size};
space-x-px	margin-left:1px;
space-y-px	margin-top:1px;

如果子元素的顺序相反，即使用flex-row-reverse或flex-col-reverse反转后，可使用space-x-reverse和space-y-reverse以确保将间隔空间添加到子元素中。

flex flex-row flex-row-reverse space-x-size space-x-reverse

flex flex-col flex-col-reverse space-y-size space-y-reverse

例如：设置容器中子元素的左间距

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 p-0 border flex flex-row space-x-4">
  <div class="bg-gray-100 p-4">1</div>
  <div class="bg-gray-200 p-4">2</div>
  <div class="bg-gray-300 p-4">3</div>
  <div class="bg-gray-400 p-4">4</div>
</div>

space-x-4

例如：设置容器中反转后元素的间距

<div class="container mx-auto my-12 p-0 border flex flex-row flex-row-reverse space-x-4 space-x-reverse">
  <div class="bg-gray-100 p-4">1</div>
  <div class="bg-gray-200 p-4">2</div>
  <div class="bg-gray-300 p-4">3</div>
  <div class="bg-gray-400 p-4">4</div>
</div>

space-x-reverse

例如：设置容器中子元素的上间距

<div class="container mx-auto my-12 p-0 border flex flex-col space-y-4">
  <div class="bg-gray-100 p-4">1</div>
  <div class="bg-gray-200 p-4">2</div>
  <div class="bg-gray-300 p-4">3</div>
  <div class="bg-gray-400 p-4">4</div>
</div>

space-y-4

例如：设置容器中已反转子元素的上间距

<div class="container mx-auto my-12 p-0 border flex flex-col flex-col-reverse space-y-4 space-y-reverse">
  <div class="bg-gray-100 p-4">1</div>
  <div class="bg-gray-200 p-4">2</div>
  <div class="bg-gray-300 p-4">3</div>
  <div class="bg-gray-400 p-4">4</div>
</div>

space-y-reverse

案例源代码

https://codepen.io/junchow/pen/GRoKrdp?editors=1000

JunChow520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tailwind Spacing

单位（size）Tailwind间距单位采用rem，rem是相对于HTML的根元素<html>标签而言的，只需在根元素确定一个参考值，即可计算出不同rem的大小。html{ font-size: 16px; }例如：浏览器默认字号为16px，常见px于rem单位之间的转换。pxrem4px4/16=.25rem8px8/16=.5rem12p...
复制链接

扫一扫