ใน Tailwind CSS ก ขอบ ใช้เพื่อควบคุมระยะห่างรอบองค์ประกอบเฉพาะ เพิ่มช่องว่างระหว่างองค์ประกอบที่ใช้กับองค์ประกอบโดยรอบ Tailwind CSS มีชุดของยูทิลิตี้ระยะขอบและค่าระยะขอบที่อนุญาตให้ผู้ใช้ปรับแต่งระยะห่างรอบองค์ประกอบที่ต้องการ นอกจากนี้ ผู้ใช้สามารถเพิ่มระยะขอบให้กับด้านเดียว เช่น ด้านบน ด้านล่าง ด้านซ้าย หรือด้านขวาขององค์ประกอบเฉพาะ
บล็อกนี้จะสาธิตตัวอย่างการเพิ่มระยะขอบให้กับด้านเดียวขององค์ประกอบใน Tailwind CSS
วิธีเพิ่มระยะขอบให้ด้านเดียวใน Tailwind
หากต้องการเพิ่มระยะขอบให้กับด้านเดียวขององค์ประกอบใน Tailwind คุณสามารถใช้คลาสยูทิลิตี้ต่อไปนี้ได้:
เพื่อให้เข้าใจได้ดีขึ้น โปรดอ่านตัวอย่างด้านล่าง
ตัวอย่างที่ 1: เพิ่มระยะขอบที่ด้านบนขององค์ประกอบ
ในตัวอย่างนี้ เราจะใช้ “ เอ็มที-14 ” คลาสยูทิลิตี้ใน “ เอาต์พุต ตัวอย่างที่ 2: เพิ่มระยะขอบที่ด้านล่างขององค์ประกอบ ในตัวอย่างนี้ เราจะใช้ “ mb-14 ” ชั้นเรียนใน “ ตัวอย่างที่ 3: เพิ่มระยะขอบทางด้านซ้ายขององค์ประกอบ ในตัวอย่างนี้ เราจะใช้ “ มล.-14 ” ชั้นเรียนใน “ ตัวอย่างที่ 4: เพิ่มระยะขอบทางด้านขวาขององค์ประกอบ ในตัวอย่างนี้ เราจะใช้ “ นาย-14 ” ชั้นเรียนใน “ หากต้องการเพิ่มระยะขอบให้กับด้านเดียวขององค์ประกอบใน Tailwind คุณสามารถใช้คลาสยูทิลิตี้ต่างๆ ได้ เช่น “ ml-<ค่า> ”, “ นาย-
< แผนก ระดับ = 'h-96 mt-14 bg-สีม่วง-500' >
< หน้า ระดับ = 'ศูนย์ข้อความ text-5xl' > ระยะขอบ ใน CSS ของ Tailwind หน้า >
แผนก >
ร่างกาย >
ที่นี่:
ผลลัพธ์ด้านบนแสดงว่ามีการเพิ่มระยะขอบที่ด้านบนของคอนเทนเนอร์
< แผนก ระดับ = 'h-96 mb-14 bg-ม่วง-500' >
< หน้า ระดับ = 'ศูนย์ข้อความ text-5xl' > ระยะขอบ ใน CSS ของ Tailwind หน้า >
แผนก >
ร่างกาย >
เอาต์พุต 
จะเห็นได้ว่ามีการเพิ่มระยะขอบที่ด้านล่างของคอนเทนเนอร์
< แผนก ระดับ = 'h-96 ml-14 bg-สีม่วง-500' >
< หน้า ระดับ = 'ศูนย์ข้อความ text-5xl' > ระยะขอบ ใน CSS ของ Tailwind หน้า >
แผนก >
ร่างกาย >
เอาต์พุต 
เอาต์พุตด้านบนแสดงว่ามีการเพิ่มระยะขอบทางด้านซ้ายขององค์ประกอบคอนเทนเนอร์
< แผนก ระดับ = 'h-96 mr-14 bg-สีม่วง-500' >
< หน้า ระดับ = 'ศูนย์ข้อความ text-5xl' > ระยะขอบ ใน CSS ของ Tailwind หน้า >
แผนก >
ร่างกาย >
เอาต์พุต 
อย่างที่คุณเห็น ระยะขอบได้รับการเพิ่มอย่างมีประสิทธิภาพทางด้านขวาของคอนเทนเนอร์ บทสรุป