จะเพิ่มช่องว่างในแนวนอนและแนวตั้งใน Tailwind ได้อย่างไร

Ca Pheim Chxng Wang Ni Naew Nxn Laea Naew Tang Ni Tailwind Di Xyangri



ใน Tailwind CSS การขยายความ คือช่องว่างระหว่างเนื้อหาขององค์ประกอบเฉพาะและเส้นขอบ ช่องว่างภายในแนวนอน คือช่องว่างทางด้านซ้ายและด้านขวาขององค์ประกอบ ในขณะที่ ช่องว่างภายในแนวตั้ง คือช่องว่างด้านบนและด้านล่างขององค์ประกอบ Tailwind เสนอคลาสยูทิลิตี้ต่างๆ เพื่อเพิ่มช่องว่างในแนวนอนหรือแนวตั้งให้กับองค์ประกอบที่ต้องการ

บทความนี้จะอธิบาย:







จะเพิ่มช่องว่างภายในแนวนอนใน Tailwind ได้อย่างไร

หากต้องการเพิ่มช่องว่างในแนวนอนให้กับองค์ประกอบใน Tailwind ให้ใช้คลาส “px-” กับองค์ประกอบที่ต้องการในโปรแกรม HTML ผู้ใช้สามารถระบุค่าต่างๆ สำหรับขนาดของช่องว่างภายในได้ คลาสนี้จะเพิ่มช่องว่างภายในตามแกน x เช่น ไปทางด้านซ้ายและด้านขวาขององค์ประกอบ



ไวยากรณ์



< องค์ประกอบ ระดับ = 'px-0 ... ' > ... องค์ประกอบ >


ในที่นี้ 'px' แทน 'แกน x' หรือ 'ช่องว่างภายในแนวนอน'





ตัวอย่าง: การใช้ช่องว่างภายในแนวนอนกับองค์ประกอบ HTML

ในตัวอย่างนี้ เราจะใช้ “ พิกเซล-20 ” คลาสยูทิลิตี้ด้วย “

” องค์ประกอบเพื่อเพิ่มช่องว่างในแนวนอน:



< ร่างกาย >

< แผนก ระดับ = 'bg-pink-600 px-20 w-max' >
การขยายความ ใน CSS ของ Tailwind
แผนก >

ร่างกาย >


เอาต์พุต


เอาต์พุตด้านบนแสดงช่องว่างภายในด้านซ้ายและขวาของคอนเทนเนอร์ สิ่งนี้บ่งชี้ว่ามีการใช้ช่องว่างภายในแนวนอนกับองค์ประกอบคอนเทนเนอร์สำเร็จแล้ว

จะเพิ่มช่องว่างในแนวตั้งใน Tailwind ได้อย่างไร

หากต้องการเพิ่มช่องว่างแนวตั้งให้กับองค์ประกอบใน Tailwind ให้ใช้ปุ่ม ' py-<ค่า> ” คลาสยูทิลิตี้ที่มีองค์ประกอบเฉพาะในโปรแกรม HTML คลาสนี้เพิ่มช่องว่างภายในตามแกน y เช่น ด้านบนและด้านล่างขององค์ประกอบ

ไวยากรณ์

< องค์ประกอบ ระดับ = 'py-0 ... ' > ... องค์ประกอบ >


ในที่นี้ 'py' แทน 'แกน y' หรือ 'ช่องว่างภายในแนวตั้ง'

ตัวอย่าง: การใช้การเติมแนวตั้งกับองค์ประกอบ HTML

ในตัวอย่างนี้ เราจะใช้ “ ไพ-20 ” คลาสยูทิลิตี้ด้วย “

” องค์ประกอบเพื่อเพิ่มช่องว่างในแนวตั้ง:

< ร่างกาย >

< แผนก ระดับ = 'bg-pink-600 py-20 w-max' >
การขยายความ ใน CSS ของ Tailwind
แผนก >

ร่างกาย >


เอาต์พุต


เอาต์พุตด้านบนแสดงการเติมที่ด้านบนและด้านล่างของคอนเทนเนอร์ สิ่งนี้บ่งชี้ว่ามีการใช้การเติมแนวตั้งอย่างมีประสิทธิภาพกับองค์ประกอบคอนเทนเนอร์

บทสรุป

หากต้องการเพิ่มช่องว่างในแนวนอนและแนวตั้งใน Tailwind ให้ใช้ปุ่ม ' px-<ค่า> ' และ ' py-<ค่า> ” คลาสยูทิลิตี้ใช้กับองค์ประกอบที่ต้องการในโปรแกรม HTML ตามลำดับ ผู้ใช้สามารถระบุค่าต่างๆ เพื่อใช้ช่องว่างภายในด้านซ้ายและด้านขวา หรือด้านบนและด้านล่างขององค์ประกอบ บทความนี้แสดงวิธีการแบบสมบูรณ์ในการใช้ช่องว่างภายในแนวนอนและแนวตั้งใน Tailwind