ตัวสร้างมาตราส่วนระยะห่าง

เกี่ยวกับเครื่องมือนี้

เครื่องมือสร้าง Spacing Scale สร้างระบบระยะห่างจากหน่วยฐาน 4, 5, 6 หรือ 8 px จำนวน 12, 16 หรือ 20 ระดับ และส่งออกเป็น CSS custom properties ในหน่วย px หรือ rem

วิธีใช้

1. เลือกหน่วยฐาน เช่น 4 px หรือ 8 px
2. เลือกผลลัพธ์เป็น px หรือ rem
3. เลือกจำนวนระดับที่ต้องการ
4. คลิก Copy CSS Variables เพื่อเพิ่มสเกลลงใน stylesheet

ข้อควรรู้

• ระยะห่างของ Tailwind CSS อิงจากหน่วย 4 px (0.25 rem)
• Material Design ใช้กริด 8 dp และใช้ 4 dp สำหรับการปรับเล็กน้อย
• ตัวคูณอย่าง 0.5, 1, 1.5, 2, 3, 4, 6 และ 8 ครอบคลุมความต้องการด้านระยะห่างเกือบทั้งหมด
• ค่า rem ในที่นี้อิงขนาดฟอนต์ root ที่ 16 px
• สเกลที่กำหนดไว้ชัดเจนช่วยแทนที่ค่าพิกเซลแบบสุ่ม และทำให้เลย์เอาต์ดูสม่ำเสมอ

ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ

คำถามที่พบบ่อย