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



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

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



2. กำหนดระยะห่างด้านบน

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

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



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

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



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

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



5. กำหนดระยะห่างด้านซ้าย

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

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



author
นันทวัฒน์ ไชยรัตน์

สวัสดีครับผมเป็นโปรแกรมเมอร์ที่ทำงานมาหลายที่ เปลี่ยนมาหลายสายงานครับเลยพอจะมีประสพการณ์มาเขียนบทความหลายๆเรื่องครับ ผมชอบลองทำอะไรใหม่ๆครับบางครั้งลองไปก็ลืมเลยต้องหาที่จดครับ เลยมาขอจดไว้ที่เว็บนี้ครับ