พื้นฐาน CSS

Padding

กำหนดระยะห่างระหว่างสิ่งที่อยู่ภายใน element กับขอบของ element

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



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

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



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

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

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



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

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



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

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



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

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

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




เลื่อนขึ้นด้านบน