บทที่ 5: การจัดการระยะห่าง (Spacing) ใน Tailwind CSS

ความสำคัญของการจัดการระยะห่าง

การจัดการระยะห่างเป็นหัวใจสำคัญของการออกแบบหน้าเว็บที่มีความสวยงามและใช้งานง่าย Tailwind CSS มี Utility Classes ที่ทำให้การกำหนดระยะห่างเป็นเรื่องง่ายและมีความยืดหยุ่น โดยไม่ต้องเขียน CSS เพิ่มเติม

1. การใช้ Margin และ Padding

ใน Tailwind CSS มีคลาสสำหรับกำหนดระยะห่างภายนอก (Margin) และระยะห่างภายใน (Padding) ดังนี้:

Margin (m): ระยะห่างภายนอก
Padding (p): ระยะห่างภายใน

ตัวอย่าง:

<div class="m-4 p-4 bg-gray-200">
  ตัวอย่างการใช้ Margin และ Padding
</div>

m-4 หมายถึง Margin รอบตัวองค์ประกอบขนาด 1rem
p-4 หมายถึง Padding รอบตัวองค์ประกอบขนาด 1rem

2. การกำหนดระยะห่างเฉพาะด้าน

คุณสามารถกำหนดระยะห่างเฉพาะด้านได้ด้วยคำสั่งต่อไปนี้:

mt-{value}: Margin ด้านบน
mr-{value}: Margin ด้านขวา
mb-{value}: Margin ด้านล่าง
ml-{value}: Margin ด้านซ้าย
pt-{value}: Padding ด้านบน
pr-{value}: Padding ด้านขวา
pb-{value}: Padding ด้านล่าง
pl-{value}: Padding ด้านซ้าย

ตัวอย่าง:

<div class="mt-6 ml-4 p-2 bg-blue-200">
  ตัวอย่างระยะห่างเฉพาะด้าน
</div>

mt-6 หมายถึง Margin ด้านบน 1.5rem
ml-4 หมายถึง Margin ด้านซ้าย 1rem
p-2 หมายถึง Padding รอบองค์ประกอบ 0.5rem

3. การใช้ระยะห่างแบบ Symmetric

คุณสามารถกำหนดระยะห่างแบบสมมาตรทั้งแนวตั้งและแนวนอนได้ด้วย:

mx-{value}: Margin ซ้ายและขวา
my-{value}: Margin บนและล่าง
px-{value}: Padding ซ้ายและขวา
py-{value}: Padding บนและล่าง

ตัวอย่าง:

<div class="mx-auto py-4 bg-green-200">
  ระยะห่างสมมาตรทั้งแนวตั้งและแนวนอน
</div>

mx-auto ใช้สำหรับจัดตำแหน่งให้อยู่ตรงกลางในแนวนอน
py-4 หมายถึง Padding บนและล่าง 1rem

4. หน่วยวัดของ Tailwind CSS

Tailwind CSS ใช้หน่วยวัดตามฐาน 4px ต่อ 1 หน่วย (หากไม่ได้ปรับแต่งใน tailwind.config.js) โดยหน่วยที่ใช้บ่อยคือ:

Class	ค่า (px)	ค่า (rem)
`0`	`0px`	`0rem`
`1`	`4px`	`0.25rem`
`2`	`8px`	`0.5rem`
`4`	`16px`	`1rem`
`8`	`32px`	`2rem`
`16`	`64px`	`4rem`

5. การจัดการระยะห่างแบบ Auto

Tailwind CSS มีคลาส auto สำหรับ Margin เท่านั้น โดยใช้เพื่อจัดตำแหน่งองค์ประกอบให้อยู่ตรงกลางในแนวนอน

ตัวอย่าง:

<div class="mx-auto w-1/2 bg-yellow-200 p-4">
  ตัวอย่างการใช้ Margin Auto
</div>

ในตัวอย่าง:

mx-auto ใช้จัดตำแหน่งให้อยู่กึ่งกลางในแนวนอน
w-1/2 กำหนดความกว้างขององค์ประกอบเป็น 50% ของ Container

6. การใช้ Negative Margin

Tailwind CSS รองรับ Negative Margin ด้วยการเติมเครื่องหมาย - ด้านหน้าคลาส เช่น:

-m-4: Negative Margin 1rem
-mt-2: Negative Margin ด้านบน 0.5rem

ตัวอย่าง:

<div class="relative bg-gray-300 p-4">
  <div class="-mt-4 bg-blue-500 text-white p-2">
    ตัวอย่าง Negative Margin
  </div>
</div>

7. การปรับแต่งระยะห่างใน Tailwind Config

หากค่าเริ่มต้นไม่เพียงพอ คุณสามารถเพิ่มระยะห่างเองในไฟล์ tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
};

ตัวอย่างนี้เพิ่มระยะห่างใหม่:

72 = 18rem
84 = 21rem
96 = 24rem

การใช้งานใน HTML:

<div class="p-72 bg-red-200">
  ระยะ Padding ที่กำหนดเอง
</div>

8. ตัวอย่างการใช้ในโปรเจกต์จริง

การจัด Layout ด้วยระยะห่าง:

<div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-6 my-8">
  <h1 class="text-2xl font-bold mb-4">Hello, Tailwind CSS</h1>
  <p class="text-gray-700 mb-6">นี่คือตัวอย่างการใช้งานระยะห่างในโปรเจกต์จริง</p>
  <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
    คลิกที่นี่
  </button>
</div>

สรุป

การจัดการระยะห่าง (Spacing) ใน Tailwind CSS ช่วยให้คุณควบคุม Layout ได้ง่ายและยืดหยุ่น ไม่ว่าจะเป็น Margin, Padding หรือการปรับระยะห่างแบบกำหนดเอง ในบทถัดไป เราจะมาทำความเข้าใจเกี่ยวกับ Typography และการจัดการตัวอักษรใน Tailwind CSS!