กำหนดระยะห่าง HTML ภายใน element ด้วย padding

กำหนดระยะห่าง HTML ภายใน element ด้วย padding บทความนี้สอนใช้คำสั่ง padding ซึ่งเป็นคำสั่งสำหรับกำหนดระยะห่างจากภายใน elements โดยรองรับการกำหนดระยะห่างทั้ง 4 มุม สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง กำหนดระยะห่าง HTML ภายใน element ด้วย padding

<style>
    .box {
        width: max-content;
        background: green;
        margin: 8px;
        text-align: center;
        color: white;
        padding: 10px;
    }
</style>

<div class="box">Hello Devdit</div>

กำหนดระยะห่าง HTML ภายใน element จากตัวอย่างโค้ด HTML มี div class=box พร้อมข้อความ “Hello Devdit” อยู่ภายใน การใช้คำสั่ง padding: 10px หมายความว่ากำหนดระยะห่างภายใน elements จากตัวอย่างคือระยะห่างระหว่างข้อความ กับกรอบพื้นที่สีเขียว โดยเว้นระยะห่างขนาด 10px ทั้ง 4 มุม กรณีตัวเลขยิ่งมากระยะห่างจะยิ่งมากตาม