iT邦幫忙

2021 iThome 鐵人賽

DAY 5
2
Modern Web

排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!系列 第 6

Day 05:「別過來!要保持社交距離!」 Tailwind 中的空間與距離

Day05-Banner

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

我! 再給你一天 XDDD

今天要做的也很簡單哦,
那麼,就開始囉!
 

carrotPoint 材料

一樣,第一個介紹的是材料。

給你們看看這些可愛的兔子演員們!


(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 !
 


(進入片場的你,看到了這幅奇妙的景象。)

我的演員們 ... 怎麼卡牆了 ... 快點,
道具組,上點外距! 手腳俐落點,動作快!

「等等 ... 兔導,哪個是外距啊?」

連外距都不知道是什麼 ...?
拍個防疫廣告還要先幫你們上課 ...

好,我告訴你。
 

carrotPoint 外距 (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>

很好,這樣就安全多了,不過這場地也太狹窄 ...,這樣的小空間擠五兔會被算群聚吧?!

不行,要讓場地範圍看起來大一點!!
 

carrotPoint 內距 (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 會不會太累了點 ...

如果今天兔子很多的話該怎麼辦!
 

carrotPoint 元素間距 (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 連結一起貼在下面,大家 ... 一定要記得做作業哦 ... 我先躲一下那個討薪水的! 拜拜!

carrotPoint 給你們的回家作業:


關於兔兔們:


 


( # 兔兔小聲說 )

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

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

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


上一篇
Day 04:「當個方塊設計師」- 製作自己的方塊,改變大小並加上背景色彩及邊框
下一篇
Day 06:「愛排隊的兔兔有紅蘿蔔!」- Flex 與 Grid
系列文
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!32
0
tsuifei
iT邦新手 5 級 ‧ 2021-09-15 15:57:07

謝謝妳的教學~很有趣!
carrotPoint 外距 (margin)的margin連結沒連到喔~
https://tailwindcss.tw/docs/margin
XD 表是有仔細看~

搋兔 iT邦新手 5 級 ‧ 2021-09-21 02:50:15 檢舉

感恩你提醒,我現在才看到!
因為我每個連結都是手 key 的所以少了一個 r
謝謝你~

/images/emoticon/emoticon62.gif

0
kshs3
iT邦新手 5 級 ‧ 2021-09-21 18:32:32

"外距、內距是允許負值的"
應該只有margin可以有負值喔!
猜測是筆者的typo 哈哈

搋兔 iT邦新手 5 級 ‧ 2021-09-22 19:33:37 檢舉

感謝提醒! 已經修正了 XD
/images/emoticon/emoticon07.gif

0
liawyudye
iT邦新手 5 級 ‧ 2021-09-29 15:17:07

還拍防疫廣告咧,真是太有創意
教學文好看有趣又清楚易懂~~~

我要留言

立即登入留言