การใช้งาน CSS marker-offset property สำหรับระยะห่าง Marker

บทนำ

คุณสมบัติ marker-offset ใน CSS ใช้สำหรับระบุระยะห่างระหว่าง **Marker** (สัญลักษณ์รายการ เช่น จุด, ตัวเลข) กับ **ข้อความ** ของรายการนั้นๆ ใน List (<ul>, <ol>)

ตัวอย่างการใช้งาน

<html>
    <head>
    </head>
    <body>
        <ul style="list-style: inside square; marker-offset: 2em;">
            <li>LAN</li>
            <li>WAN</li>
        </ul>
    </body>
</html>

คำอธิบาย

• list-style: inside square - ใช้สัญลักษณ์สี่เหลี่ยมจัตุรัส วางภายในเนื้อหา
• marker-offset: 2em - กำหนดระยะห่างระหว่าง Marker (สี่เหลี่ยม) กับข้อความ "LAN", "WAN" เป็น 2em

หมายเหตุ: คุณสมบัติ marker-offset เป็นคุณสมบัติเก่า (Legacy) และถูกแทนที่ด้วย ::marker Pseudo-element ใน CSS Pseudo-Elements Module Level 4 แนะนำให้ใช้ ::marker { margin-right: 2em; } แทนในโปรเจกต์ใหม่

ตัวอย่างสมัยใหม่ (แนะนำ)

<style>
    ul.modern-list {
        list-style: square inside;
    }
    ul.modern-list li::marker {
        margin-right: 2em; /* แทน marker-offset */
        color: #333;
        font-size: 1.2em;
    }
</style>

<ul class="modern-list">
    <li>LAN</li>
    <li>WAN</li>
</ul>