CSS อนุญาตให้เราตั้งค่า padding เฉพาะด้านสำหรับองค์ประกอบ คุณสมบัติ padding-top, padding-right, padding-bottom และ padding-left กำหนด padding ด้านบน ขวา ล่าง และซ้ายตามลำดับ คุณสมบัติ padding แบบย่อก็สามารถใช้เพื่อให้ได้ผลลัพธ์เดียวกันโดยระบุค่าในทิศทางเข็มนาฬิกา
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS padding ดังนี้:
Selector { padding-top: /*value*/ padding-right: /*value*/ padding-bottom: /*value*/ padding-left: /*value*/ }
ตัวอย่างต่อไปนี้แสดงการจัดรูปแบบรายการ:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> article { margin: 2em 1em; padding: 3%; background-color: plum; letter-spacing: 0.05em; } span { padding: 0 53%; border-right: dashed; background-image: linear-gradient(to right, lavenderblush, lightblue); font-size: 1.4em; font-style: italic; } </style> </head> <body> <h2>Xamarin คืออะไร?</h2> <article> <span>Xamarin เป็นบริษัทซอฟต์แวร์ตั้งอยู่ในซานฟรานซิสโก Xamarin สร้างบน .NET Framework</span> มันมีเครื่องมือพัฒนาซอฟต์แวร์เชิงพาณิชย์ที่อนุญาตให้ผู้ใช้พัฒนาแอปพลิเคชันสำหรับ Android, iOS และ Windows โดยใช้ภาษา C# และ .NET framework </article> </body> </html>
ผลลัพธ์
ตัวอย่างเพิ่มเติม
<!DOCTYPE html> <html> <head> <style> div { max-width: 400px; padding-left: 30px; padding-top: 44px; padding-bottom: 60px; background-image: linear-gradient(to bottom, oldlace, lightblue); border: thin solid; text-align: center; } div > div { padding-right: 70px; } </style> </head> <body> <h2>ภาษาโปรแกรมมิ่ง Swift โดย Apple</h2> <div>Swift เป็นภาษาโปรแกรมมิ่งที่พัฒนาโดย Apple Inc สำหรับการพัฒนา iOS และ OS X <div>Swift 4 ใช้รันไทม์เดียวกับระบบ Obj-C ที่มีอยู่บน Mac OS และ iOS ซึ่งทำให้โปรแกรม Swift 4 ทำงานบน iOS 6 และ OS X 10.8 ที่มีอยู่มากมาย </div> </div> </body> </html>
ผลลัพธ์
