ใน Tailwind CSS การขยายความ คือช่องว่างระหว่างเนื้อหาขององค์ประกอบเฉพาะและเส้นขอบ ช่องว่างภายในแนวนอน คือช่องว่างทางด้านซ้ายและด้านขวาขององค์ประกอบ ในขณะที่ ช่องว่างภายในแนวตั้ง คือช่องว่างด้านบนและด้านล่างขององค์ประกอบ Tailwind เสนอคลาสยูทิลิตี้ต่างๆ เพื่อเพิ่มช่องว่างในแนวนอนหรือแนวตั้งให้กับองค์ประกอบที่ต้องการ
บทความนี้จะอธิบาย:
จะเพิ่มช่องว่างภายในแนวนอนใน Tailwind ได้อย่างไร
หากต้องการเพิ่มช่องว่างในแนวนอนให้กับองค์ประกอบใน Tailwind ให้ใช้คลาส “px-
ไวยากรณ์
< องค์ประกอบ ระดับ = 'px-0 ... ' > ... องค์ประกอบ >
ในที่นี้ 'px' แทน 'แกน x' หรือ 'ช่องว่างภายในแนวนอน'
ตัวอย่าง: การใช้ช่องว่างภายในแนวนอนกับองค์ประกอบ HTML
ในตัวอย่างนี้ เราจะใช้ “ พิกเซล-20 ” คลาสยูทิลิตี้ด้วย “ หากต้องการเพิ่มช่องว่างแนวตั้งให้กับองค์ประกอบใน Tailwind ให้ใช้ปุ่ม ' py-<ค่า> ” คลาสยูทิลิตี้ที่มีองค์ประกอบเฉพาะในโปรแกรม HTML คลาสนี้เพิ่มช่องว่างภายในตามแกน y เช่น ด้านบนและด้านล่างขององค์ประกอบ ไวยากรณ์ ตัวอย่าง: การใช้การเติมแนวตั้งกับองค์ประกอบ HTML ในตัวอย่างนี้ เราจะใช้ “ ไพ-20 ” คลาสยูทิลิตี้ด้วย “ หากต้องการเพิ่มช่องว่างในแนวนอนและแนวตั้งใน Tailwind ให้ใช้ปุ่ม ' px-<ค่า> ' และ ' py-<ค่า> ” คลาสยูทิลิตี้ใช้กับองค์ประกอบที่ต้องการในโปรแกรม HTML ตามลำดับ ผู้ใช้สามารถระบุค่าต่างๆ เพื่อใช้ช่องว่างภายในด้านซ้ายและด้านขวา หรือด้านบนและด้านล่างขององค์ประกอบ บทความนี้แสดงวิธีการแบบสมบูรณ์ในการใช้ช่องว่างภายในแนวนอนและแนวตั้งใน Tailwind
< ร่างกาย >
< แผนก ระดับ = 'bg-pink-600 px-20 w-max' >
การขยายความ ใน CSS ของ Tailwind
แผนก >
ร่างกาย >
เอาต์พุต
เอาต์พุตด้านบนแสดงช่องว่างภายในด้านซ้ายและขวาของคอนเทนเนอร์ สิ่งนี้บ่งชี้ว่ามีการใช้ช่องว่างภายในแนวนอนกับองค์ประกอบคอนเทนเนอร์สำเร็จแล้ว จะเพิ่มช่องว่างในแนวตั้งใน Tailwind ได้อย่างไร
ในที่นี้ 'py' แทน 'แกน y' หรือ 'ช่องว่างภายในแนวตั้ง'
< แผนก ระดับ = 'bg-pink-600 py-20 w-max' >
การขยายความ ใน CSS ของ Tailwind
แผนก >
ร่างกาย >
เอาต์พุต
เอาต์พุตด้านบนแสดงการเติมที่ด้านบนและด้านล่างของคอนเทนเนอร์ สิ่งนี้บ่งชี้ว่ามีการใช้การเติมแนวตั้งอย่างมีประสิทธิภาพกับองค์ประกอบคอนเทนเนอร์ บทสรุป