Day 05：「别过来！要保持社交距离！」 Tailwind 中的空间与距离

Day05-Banner

一次收两份作业的时候到罗！
没写作业的手伸出来，手心朝上！！

我！再给你一天 XDDD

今天要做的也很简单哦，
那麽，就开始罗！

材料

一样，第一个介绍的是材料。

给你们看看这些可爱的兔子演员们！

(p.s. 图片仿画 line 贴图：居米公主13)

那再来重要的就是 html 结构啦～

为了方便大家学习，我已经把一些样式先做好，让画面看起来简单一点，可以只专注在今天要做的部分就好了！

<div id="卫生所" class="bg-red-200">
  <span class="兔 没口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
</div>

今天是要拍防疫广告，我先把今天片场的连结放在这里，

「都准备好了，兔导！」

嗯？准备好了是吗？
Okay，各号机准备，灯光准备

3 ... 2... 1 ... ACTION !

(进入片场的你，看到了这幅奇妙的景象。)

我的演员们 ... 怎麽卡墙了 ... 快点，
道具组，上点外距！手脚俐落点，动作快！

「等等 ... 兔导，哪个是外距啊？」

连外距都不知道是什麽 ...？
拍个防疫广告还要先帮你们上课 ...

好，我告诉你。

外距 (margin)

藉由 {正/负} m {轴向,方向}-{距离} 这个功能，我们可以设定 / 改变元素与外部其它元素的距离，例如 -mx-40 功能是将元素的外距设定为 -10rem。

跟前面其它介绍过的东西不同，外距是允许负值的，
所以公式看起来稍微复杂了点，但用起来不难哦！

公式

正： m{轴向,方向}-{距离}
负： -m{轴向,方向}-{距离}

接着，就只介绍正值的部分，因为负值的数值范围和正值相同，
差别只是在於正负号而已。

以下是预设可以使用的外距功能：

X轴
- mx-0
- mx-px
- mx-1
  ...
- mx-96
- mx-auto
Y轴
- my-0
- my-px
- my-1
  ...
- my-96
- my-auto
上
- mt-0
- mt-px
  ...
- mt-auto
右
- mr-0
  ...
- mr-auto
下
- mb-0
  ...
- mb-auto
左
- ml-0
  ...
- ml-auto

细心的你，可能会注意到为何外距与前一篇的宽度、高度的基本数值范围都是从 0 ～ 96？因为，宽度、高度、内距、外距、元素间距、间隙这些功能的空间域设定值是共用的哦！

为了不让我们的演员们卡墙，必须用外距 m-20 来先让场地跟外面四周都距离 5rem：

<div id="卫生所" class="bg-red-200 m-20">
  <span class="兔 没口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
</div>

太好了，兔子们都从墙壁里面出来了！

但是，这是防疫广告啊，
怎麽可以让没戴口罩的破口兔跟其他兔这麽靠近！！！

「来人啊，隔开牠们」

所以接着我们要把有戴口罩的兔子们分组，跟破口兔保持距离，这时候就必须用 span 包起来然後给上 ml-6 使牠们保持着 1.5 ... rem 的社交安全距离：

<div id="卫生所" class="bg-red-200 m-20">
  <span class="兔 没口罩"></span>
  <!-- code 也要社交安全距离呦～ -->
  <span class="ml-6">
    <span class="兔 有口罩"></span>
    <span class="兔 有口罩"></span>
    <span class="兔 有口罩"></span>
    <span class="兔 有口罩"></span>
  </span>
</div>

很好，这样就安全多了，不过这场地也太狭窄 ...，这样的小空间挤五兔会被算群聚吧？！

不行，要让场地范围看起来大一点！！

内距 (padding)

藉由 {正/负} p {轴向,方向}-{宽度} 这个功能，我们可以设定 / 改变元素内部与子元素的距离，例如 px-40 功能是将元素的内距设定为 10rem。

以下是预设可以使用的内距功能：

X轴
- px-0
  ...
- px-auto
Y轴
- py-0
  ...
- py-auto
上
- pt-0
  ...
- pt-auto
右
- pr-0
  ...
- pr-auto
下
- pb-0
  ...
- pb-auto
左
- pl-0
  ...
- pl-auto

接着我们把 #卫生所 场地的内距设定为 px-5 py-8，也就是相当於左右各距 1.25rem、上下各距 2rem：

<div id="卫生所" class="bg-red-200 m-20 px-5 py-8">
  <span class="兔 没口罩"></span>
  <!-- code 也要社交安全距离呦～ -->
  <span class="ml-6">
    <span class="兔 有口罩"></span>
    <span class="兔 有口罩"></span>
    <span class="兔 有口罩"></span>
    <span class="兔 有口罩"></span>
  </span>
</div>

是不是～这个场地大小舒服多了吧！

但是， ~~(你又有但是了！！)~~

社交距离是每个人要距离 1.5 re(公)m(尺) 欸 ...
现在它们看起来还是离太近了，
不过每个人都加 ml-6 会不会太累了点 ...

如果今天兔子很多的话该怎麽办！

元素间距 (space)

透过 space-{轴向}-{距离} 这个功能，我们可以设定 / 改变区块内第一层各子元素之间的距离，例如 space-y-36 功能是将元素的 Y 轴间距设定为 8rem 左右 。

因为使用方法和空间域也都和外距完全相同，
所以这边就不介绍公式了。

以下是预设可以使用的元素间距功能：

X轴
- space-x-0
  ...
- space-x-96
- space-x-reverse
Y轴
- space-y-0
  ...
- space-y-96
- space-y-reverse

这时候因为破口兔已经跟有戴口罩的兔们保持距离了，所以我们只要对乖乖兔们使用元素间距功能 space-x-7 space-y-6 来让兔子们 左右距离 1.75rem，上下距离 1.5rem：

<div id="卫生所" class="bg-red-200 m-20 px-5 py-8">
  <span class="兔 没口罩"></span>
  <!-- code 也要社交安全距离呦～ -->
  <span class="ml-6 space-x-7 space-y-6">
    <span class="兔 有口罩"></span>
    <span class="兔 有口罩"></span>
    <span class="兔 有口罩"></span>
    <span class="兔 有口罩"></span>
  </span>
</div>