Day 9 - 间距使用方式

相信在座的看倌都知道 marge、padding 是做什麽用的，还不知道的同学可能要自行补一下 CSS，威尔猪在这边就不多说了。这边不要再用自以为聪明的蠢方法 m-15、p-30 之类方式来写 CSS 了，理由在文字篇有讲过，就不重复说明。

外边界 (Marge)：

Tailwind 预设已帮我们写好常用的数值，其实和 Bootstrap 4 之前的写法一样，margin 为 m-，margin-top 为 mt-，margin-bottom 为 mb-，margin-left 为 ml-，margin-right 为 mr-，预设使用方式为 m{ t | b | l | r }-{数值}，不过 Bootstrap 5 左右边已经改为 ms-、me-，应该是为了对应 Flex 吧，千万不要搞混了。

这边威尔猪也帮大家整理了 rem 对应的 px 值，如下表。可能有同学会问，这麽多奇怪的数值，哪背得起来 class 对应的到底是多少 px？(等等写错设计师又会来检查我的眼睛)。威尔猪教大家简单的方式，只要你没改原本预设的设定，後面的 数值 X 4，就是多少 px 啦。例如 margin-bottom: -20px;，那 class 就为 -mb-5。

别忘了 margin 可以有负值。

内边距 (Padding)：

和 margin 写法一样，padding 为 p-，pdding-top 为 pt-，pdding-bottom 为 pb-，pdding-left 为 pl-，pdding-right 为 pr-，预设使用方式为 p{ t | b | l | r }-{数值}，不过别忘了 padding 可没有负值喔。

左右一样的外边界 ＼ 内边距

使用方式为：mx-{数值} ＼ px-{数值}。

左右 外边界 ＼ 内边距 为 20px 的写法就是 mx-5 ＼ px-5。

水平置中为：mx-auto。

上下一样的外边界 ＼ 内边距

使用方式为：my-{数值} ＼ px-{数值}。

上下 外边界 ＼ 内边距 为 16px 的写法就是 my-4 ＼ py-4。

自订间距

一般正常情况下，设计师通常会设定 4px 或 8px 的倍数来进行版面设计，但如果你的设计师是用 5px 倍数设计怎办？没关系，我们也可以自定义。

如果想一次性定义 margin、padding、width、height、maxHeight、gap、inset、space、translate 等的值，请使用设定档 tailwind.config.js 中 theme 的 spacing 加入设定值，这时以上项目间距都会被继承。范例如下：

  // tailwind.config.js
  
  module.exports = {
    theme: {
      ... ,
      spacing: {
       1: '5px',
       2: '10px',
       3: '15px',
       4: '20px',
       6: '30px',
       8: '40px',
       10: '50px',
       12: '60px',
       16: '80px',
       ... 
      },
      ... 
    },
  }

如果只想修改其中一个项目，将 spacing 替换成想修改的项目就可以了，如 margin。

另外还有子元素之间间隔：space-{ x | y }-{数值}，有兴趣的同学再自行研究，原理和上面的 margin、padding 差不多。

字母间距

有时候设计师使用文字间距，会让画面看起来更合适。Tailwind 也预设了几个方便我们使用，使用方式：tracking-，注意这边预设单位为 em。来看看字距有啥变化：

<p class="tracking-tighter">Hello Tailwind!</p>
<p class="tracking-tight">Hello Tailwind!</p>
<p class="tracking-normal">Hello Tailwind!</p>
<p class="tracking-wide">Hello Tailwind!</p>
<p class="tracking-wider">Hello Tailwind!</p>
<p class="tracking-widest">Hello Tailwind!</p>

如果想修改，使用设定档 tailwind.config.js 中 theme 的 letterSpacing 来修改吧，方式和往常一样。那麽今天就先到这，咱们明天见。