https://benzhub.github.io/tags/%E9%96%93%E8%B7%9D/Recent content in 間距 on BenzHubHugozh-TWWed, 12 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/012-spacing/Wed, 12 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/012-spacing/<blockquote> <p>在 <strong>TailwindCSS</strong> 裡，<strong>間距系統（Spacing）</strong> 是決定版面「呼吸感」的靈魂——元素內部要留多少 <code>padding</code>、彼此之間要隔多遠 <code>margin</code>、一排子項要用什麼方式拉開，全靠這套工具。只要用 <code>p-*</code>／<code>px-*</code>／<code>py-*</code> 控制內距、<code>m-*</code>／<code>mx-auto</code> 控制外距與置中、<code>space-x-*</code>／<code>space-y-*</code> 或 <code>gap-*</code> 控制子元素間隔，就能把一個「擠成一團」的版面調成「疏密有致」。這是 <strong>TailwindCSS 完整教學</strong> 系列的第十二篇，我們會把 <strong>padding</strong>、<strong>margin</strong>、<strong>space</strong> 與 <strong>gap</strong> 一次講透，並帶你理解 v4 由單一 <code>--spacing</code> 變數動態推導間距刻度的設計，以 v4 為預設、標註與 v3 的差異。</p> </blockquote>