การใช้ Padding

เราสามารถกำหนด ขอบใน หรือ padding ให้กับ HTML Element ได้ทั้ง 4 ด้าน ด้วยความกว้างแตกต่างกัน padding คือระยะห่างจากขอบในของ box model กับเนื้อหาข้างใน หรือ box ที่อยู่ข้างใน

การกำหนด padding กับ class ต้องนับรวมกันทั้งหมด ถือเป็นความกว้างเดียวกัน เช่น ถ้าเราจะสร้าง คลาส 1 คลาส ให้มีความกว้าง 500px ระยะห่างจากขอบซ้ายและขวา ฝั่งละ 5px หรือ padding ซ้าย-ขวา-บน-ล่าง 5px จะได้ดังนี้


.pd {
width: 490px;
padding: 5px;
}

รูปภาพกล่อง สีเหลือง

เมื่อเรานำความกว้างทั้งหมดมารวมกันจะได้ 500px พอดี และเนื้อที่สำหรับข้อมูลข้างในจะเหลือเพียง 490px

Back to Top

0 Responses to การใช้ Padding

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top