Spacing Systems

คุณรู้อยู่แล้วว่า spacing แบบสุ่มรู้สึกผิด เมื่อปุ่มมี padding 14px ในที่หนึ่งและ 11px ในอีกที่หนึ่ง ผู้ใช้รู้สึกได้ — แม้ว่าพวกเขาจะไม่สามารถบอกได้ว่าทำไม นักออกแบบใช้ spacing tokens เพื่อป้องกันสิ่งนี้ ใน CSS เราทำสิ่งเดียวกันพอดี: ผูกมัดกับ spacing scale และใช้เฉพาะค่าจาก scale นั้น

ระบบ spacing 4/8px

spacing scale ที่ใช้กันมากที่สุดนั้นอิงตามตัวคูณของ 4 (บางครั้งเรียกว่า “4-point grid”) หรือตัวคูณของ 8 (“8-point grid”) ทุกค่า spacing ในโปรเจกต์ของคุณมาจากลำดับนี้:

Step	4pt scale	8pt scale
1	4px	8px
2	8px	16px
3	12px	24px
4	16px	32px
5	20px	40px
6	24px	48px

ใน CSS มักแสดงเป็นหน่วย rem (โดยที่ 1rem = 16px ตามค่าเริ่มต้น):

rem	เทียบเท่า px
`0.25rem`	4px
`0.5rem`	8px
`0.75rem`	12px
`1rem`	16px
`1.5rem`	24px
`2rem`	32px

สาม spacing properties

padding — พื้นที่ ภายใน element ระหว่าง border กับเนื้อหา ทำให้ element เองใหญ่ขึ้น คิดว่าเหมือน “horizontal/vertical padding” ใน Figma auto-layout frame

margin — พื้นที่ ภายนอก element ดัน neighbor ออกไป ไม่ทำให้ element ใหญ่ขึ้น — แต่สร้างบัฟเฟอร์โซนรอบๆ

gap — พื้นที่ ระหว่าง children ใน Flex หรือ Grid container วิธีที่สะอาดและคาดเดาได้มากที่สุดในการเว้นระยะไอเทม — ไม่เพิ่มพื้นที่รอบขอบ เพิ่มเฉพาะระหว่างไอเทม

เมื่อไรใช้อะไร

สถานการณ์	ใช้
พื้นที่ระหว่างไอเทมใน flex หรือ grid container	`gap`
padding ภายในของปุ่ม, card หรือกล่อง	`padding`
ดัน element หนึ่งออกจาก sibling	`margin`
จัดกึ่งกลาง block element ในแนวนอน	`margin: 0 auto`
เว้นเนื้อหาห่างจากขอบหน้า	`padding` บน body/container

ตัวอย่างที่แก้ไขได้ — card ที่มี spacing system

<div class="page">
  <div class="card">
    <h2 class="card-title">Card Title</h2>
    <p class="card-body">This card uses a consistent spacing scale. All padding and gap values come from multiples of 8px.</p>
    <div class="actions">
      <button class="btn-primary">Primary</button>
      <button class="btn-secondary">Secondary</button>
    </div>
  </div>
  <div class="card">
    <h2 class="card-title">Another Card</h2>
    <p class="card-body">Same component, same spacing rules. Notice how they feel consistent.</p>
    <div class="actions">
      <button class="btn-primary">Primary</button>
    </div>
  </div>
</div>

สิ่งที่ลองได้:

เปลี่ยน padding ของ .card จาก 1.5rem เป็น 0.5rem — สังเกตว่ารู้สึกแออัดแค่ไหน
เปลี่ยน gap ของ .page จาก 1rem เป็น 3rem — สังเกตว่าโปร่งขึ้นแค่ไหน
เปลี่ยน gap ของ .actions จาก 0.5rem เป็น 2rem — ปุ่มจะห่างออกจากกัน
ลอง padding: 2rem บน .card — การ์ดจะขยายให้พอดี

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ใส่ spacing แบบสุ่ม (13px, 22px, 7px) แทนใช้ scale ที่สม่ำเสมอ
ไม่ sync spacing scale ระหว่าง Figma กับ code ทำให้ developer ต้อง “เดา” ค่าที่ใกล้เคียงที่สุด

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “ระยะห่างที่ดูดี” แต่ developer อยากได้ scale จำกัด (4px, 8px, 16px, 24px…) เพื่อ map เป็น design token/CSS variable ที่ reuse ได้ทั้งระบบ

💡 ตัวอย่างจากของจริง

Design system ของ Airbnb และ Stripe ใช้ spacing scale แบบ 4px หรือ 8px grid เท่านั้น ทำให้ทุก spacing ในทั้งเว็บ “ไปด้วยกัน” โดยไม่ต้องคิดใหม่ทุกครั้ง