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