inset CSS คือคำสั่งอะไร ใช้ทำอะไร

inset CSS คือคำสั่งแบบสั้นสำหรับกำหนดตำแหน่ง top, right, bottom และ left โดยสามารถกำหนดค่าทั้ง 4 ผ่านคำสั่ง inset เพียงคำสั่งเดียว คล้ายกับการกำหนดค่าของ margin และ padding สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง inset CSS คือคำสั่งอะไร ใช้ทำอะไร

<style>
    #box {
        position: relative;
        width: 100px;
        height: 100px;
        background: red;
        inset: 5px 8px 9px 15px;
    }
</style>

<div id="box"></div>

inset CSS คือ shorthand สำหรับกำหนดค่า top, right, bottom และ left จากตัวอย่างเขียนคำสั่ง inset: 5px 8px 9px 15px โดยมีความหมายดังนี้

1. 5px คือ ค่า top ขยับ elements จากด้านบน ขนาด 5px

2. 8px คือ ค่า right ขยับ elements จากทางขวา ขนาด 8px

3. 9px คือ ค่า bottom ขยับ elements จากด้านล่าง ขนาด 9px

4. 15px คือ ค่า left ขยับ elements จากทางซ้าย ขนาด 15px

ตัวอย่าง การใช้คำสั่ง inset CSS แบบอื่นๆ

inset: 0; /* top right bottom left = 0 */
inset: 5px; /* top right bottom left = 5px */
inset: 5% 0; /* top และ bottom = 5% ส่วน left และ right = 0 */
inset: 0 10%; /* top และ bottom = 0 ส่วน left และ right = 10% */