一次收兩份作業的時候到囉！
沒寫作業的手伸出來，手心朝上！！

我！ 再給你一天 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>

讚啦！ 這樣就完美了，這樣拍的廣告才有影響力！

卡！ 今天就到這邊了。

「謝謝兔導～」 「兔導辛苦了～」

「兔導那個上個月的片酬 ... 欸！兔導你等等我，別走這麼快！」

欸都，今天一樣會放使用到的範例結構和成品 playground 連結一起貼在下面，大家 ... 一定要記得做作業哦 ... 我先躲一下那個討薪水的！ 拜拜！

給你們的回家作業：

• 作業實施要點：
  • 試著改改兔子們的距離，或換個喜歡的地板顏色吧！
• 卡牆的演員們：點我打開作業
• 殺青現場：點我打開範本
   

關於兔兔們：

• Tailwind CSS 臺灣官網
• Tailwind CSS 臺灣 (臉書粉絲專頁)
• 兔兔教 × Tailwind CSS Taiwan (臉書社群)
• 兔兔教大本營

( # 兔兔小聲說 )

就跟你說了 ... 還在周轉啦 ...

「可是兔導你上禮拜就說可以給我了欸！ 快點啦！」

但我就真 ... 欸你東西先放下，沒甚麼事情是不能商量的！