ใน Tailwind CSS ตัว “ ช่องว่างระหว่าง ยูทิลิตี้ ” ใช้เพื่อควบคุมช่องว่างระหว่างองค์ประกอบลูกของคอนเทนเนอร์ดิ้นหรือกริด มีคลาสต่างๆ เช่น 'space-x-
คู่มือนี้จะเป็นตัวอย่างวิธีการใช้ค่าช่องว่างเชิงลบใน Tailwind
จะใช้ค่าช่องว่างเชิงลบใน Tailwind ได้อย่างไร
หากต้องการใช้ค่าช่องว่างเชิงลบใน Tailwind ขั้นแรกให้สร้างโครงสร้าง HTML จากนั้นใช้เครื่องหมายขีด “ – ” ด้วยคลาสยูทิลิตี้ 'ช่องว่างระหว่าง' ที่ต้องการเพื่อแปลงเป็นค่าลบ “ -space-x-<ค่า> ' และ ' -space-y-<ค่า> ” ยูทิลิตี้มักจะใช้เพื่อวางองค์ประกอบหนึ่งภายในองค์ประกอบอื่น
มาดูตัวอย่างด้านล่างเพื่อทำความเข้าใจให้ดีขึ้น
ตัวอย่างที่ 1: ใช้ระยะห่างแนวนอนที่เป็นลบระหว่างองค์ประกอบ
ในตัวอย่างนี้ เรามีคอนเทนเนอร์ดิ้นที่มีองค์ประกอบลูกบางส่วนเรียงกันเป็นแถว เราจะใช้ “ -สเปซ-x-8 ” คลาสเพื่อใช้ระยะห่างแนวนอนเชิงลบระหว่างองค์ประกอบดิ้น:
< ร่างกาย >< กอง ระดับ = 'ดิ้น -สเปซ-x-8 ม.-10 ชม.-20 w-สูงสุด' >
< กอง ระดับ = 'bg-น้าน-500 w-20 p-5 เส้นขอบ-2 เส้นขอบน้าน-800' > 1 กอง >
< กอง ระดับ = 'bg-น้าน-500 w-20 p-5 เส้นขอบ-2 เส้นขอบน้าน-800' > 2 กอง >
< กอง ระดับ = 'bg-น้าน-500 w-20 p-5 เส้นขอบ-2 เส้นขอบน้าน-800' > 3 กอง >
< กอง ระดับ = 'bg-น้าน-500 w-20 p-5 เส้นขอบ-2 เส้นขอบน้าน-800' > 4 กอง >
< กอง ระดับ = 'bg-น้าน-500 w-20 p-5 เส้นขอบ-2 เส้นขอบน้าน-800' > 5 กอง >
< กอง ระดับ = 'bg-น้าน-500 w-20 p-5 เส้นขอบ-2 เส้นขอบน้าน-800' > 6 กอง >
กอง >
ร่างกาย >
ที่นี่ในองค์ประกอบ parent
-
- “ ดิ้น ” คลาสสร้างเลย์เอาต์ที่ยืดหยุ่น
- “ -สเปซ-x-8 ” คลาสเพิ่มระยะห่างแนวนอนเชิงลบ 8 หน่วยระหว่างองค์ประกอบดิ้นภายในคอนเทนเนอร์
- “ ม-10 ” คลาสเพิ่มระยะขอบ 10 หน่วยให้กับทุกด้านของคอนเทนเนอร์
- “ เอช-20 ” คลาสกำหนดความสูงของคอนเทนเนอร์เป็น 20 หน่วย
- “ W-สูงสุด ” คลาสกำหนดความกว้างของคอนเทนเนอร์ให้มีความกว้างของเนื้อหาสูงสุด
ในองค์ประกอบย่อย
-
- “ บีจี-น้าน-500 ” คลาสจะตั้งค่าพื้นหลังขององค์ประกอบดิ้นให้เป็นสีน้ำเงินอมเขียว
- “ w-20 ” คลาสกำหนดความกว้างของแต่ละรายการดิ้นเป็น 20 หน่วย
- “ หน้า-5 ” คลาสเพิ่มช่องว่างภายใน 5 หน่วยลงทุกด้านของแต่ละรายการดิ้น
- “ ชายแดน-2 ” คลาสกำหนดความกว้างของเส้นขอบของคอนเทนเนอร์เป็น 2 หน่วย
- “ ขอบน้าน-800 ” คลาสใช้สีน้านกับเส้นขอบ
เอาท์พุต
ผลลัพธ์ข้างต้นแสดงให้เห็นว่าองค์ประกอบดิ้นซ้อนทับกัน สิ่งนี้บ่งชี้ว่ามีการใช้ค่าช่องว่างแนวนอนที่เป็นลบเรียบร้อยแล้ว
ตัวอย่างที่ 2: ใช้ระยะห่างแนวตั้งเชิงลบระหว่างองค์ประกอบ
ในตัวอย่างนี้ เรามีคอนเทนเนอร์ดิ้นที่มีองค์ประกอบย่อยอยู่ในคอลัมน์ เราจะใช้ “ -อวกาศ-y-7 ” คลาสเพื่อใช้ระยะห่างแนวตั้งเชิงลบระหว่างองค์ประกอบดิ้น:
< ร่างกาย >< กอง ระดับ = 'ข้อความ flex flex-col -space-y-7 m-10' >
< กอง ระดับ = 'bg-teal-500 p-5 เส้นขอบ-2 เส้นขอบน้าน-800' > 1 กอง >
< กอง ระดับ = 'bg-teal-500 p-5 เส้นขอบ-2 เส้นขอบน้าน-800' > 2 กอง >
< กอง ระดับ = 'bg-teal-500 p-5 เส้นขอบ-2 เส้นขอบน้าน-800' > 3 กอง >
< กอง ระดับ = 'bg-teal-500 p-5 เส้นขอบ-2 เส้นขอบน้าน-800' > 4 กอง >
กอง >
ร่างกาย >
ที่นี่:
-
- “ ดิ้น ” คลาสสร้างเลย์เอาต์ที่ยืดหยุ่น
- “ ดิ้น-col ” คลาสจัดตำแหน่งรายการดิ้นในแนวตั้ง
- “ -อวกาศ-y-5 ” คลาสเพิ่มระยะห่างเชิงลบแนวตั้ง 7 หน่วยระหว่างองค์ประกอบดิ้นภายในภาชนะ
- “ ม-10 ” คลาสเพิ่มระยะขอบ 10 หน่วยให้กับทุกด้านของคอนเทนเนอร์
- “ ศูนย์ข้อความ ” คลาสจัดข้อความของคอนเทนเนอร์ให้อยู่ตรงกลาง
เอาท์พุต
จะเห็นได้ว่าองค์ประกอบดิ้นซ้อนทับกัน สิ่งนี้บ่งชี้ว่ามีการใช้ค่าช่องว่างแนวตั้งที่เป็นลบเรียบร้อยแล้ว
บทสรุป
หากต้องการใช้ค่าช่องว่างเชิงลบใน Tailwind ให้ใช้เครื่องหมาย “ -space-x-<ค่า> ' และ ' -space-y-<ค่า> ” ยูทิลิตี้ที่มีคอนเทนเนอร์ดิ้นหรือกริดที่ต้องการในโครงสร้าง HTML ยูทิลิตี้เหล่านี้มักจะใช้เพื่อวางองค์ประกอบหนึ่งภายในองค์ประกอบอื่น คู่มือนี้ได้ยกตัวอย่างวิธีการใช้ค่าช่องว่างเป็นลบใน Tailwind