padding จัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา เช่น ระยะห่างระหว่างเส้นตาราง และเนื้อหาในตาราง หลายคนคงสงสัยว่าแล้วมันต่างจาก margin ยังไง ก็ดูที่รูปด้านล่าง จะแสดงให้เห็นว่า margin และ padding ต่างกันยังไง

1. ตัวอย่างการใช้งาน padding
ในตัวอย่างแสดงการใช้งาน padding ซึ่งจะใช้คำสั่ง padding เพื่อบอกระยะห่างระหว่างตารางและเนื้อหา เช่นเดียวกับการกำหนดระยะใน margin สามารถใช้หน่วย cm , px หรือบอกเป็น % ก็ได้

คลิกเพื่อทดลองเขียนด้วยตัวเอง

2. กำหนดระยะห่างด้านบน
ในตัวอย่างเป็นการกำหนดระยะห่างด้านบนของวัตถุ

คลิกเพื่อทดลองเขียนด้วยตัวเอง

3. กำหนดระยะห่างด้านขวา
ในตัวอย่างเป็นการกำหนดระยะห่างด้านขวาของวัตถุ

คลิกเพื่อทดลองเขียนด้วยตัวเอง

4. กำหนดระยะห่างด้านล่าง
ในตัวอย่างเป็นการกำหนดระยะห่างด้านล่างของวัตถุ

คลิกเพื่อทดลองเขียนด้วยตัวเอง

5. กำหนดระยะห่างด้านซ้าย
ในตัวอย่างเป็นการกำหนดระยะห่างด้านซ้ายของวัตถุ

คลิกเพื่อทดลองเขียนด้วยตัวเอง