Article Categories

Selected Reading

Which property specifies the distance between nearest border edges of marker box and principal box?

CSS Web Development Front End Technology

The CSS marker-offset property specifies the distance between the nearest border edges of the marker box and the principal box. The marker refers to the bullet points or numbers in lists. However, it's important to note that this property was deprecated and removed from CSS specifications due to limited browser support.

Important: The marker-offset property is obsolete and no longer supported in modern browsers. For similar functionality, use padding-left or margin-left on list items instead.

Syntax

selector {
    marker-offset: value;
}

Example 1: Unordered List with Marker Offset

The following example demonstrates the marker-offset property with an unordered list

<!DOCTYPE html>
<html>
<head>
<style>
    .list {
        marker-offset: 2em;
    }
    
    .modern-approach {
        padding-left: 3em;
    }
</style>
</head>
<body>
    <h3>Using marker-offset (deprecated)</h3>
    <ul class="list">
        <li>JavaScript</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>C</li>
        <li>C++</li>
    </ul>
    
    <h3>Modern approach with padding-left</h3>
    <ul class="modern-approach">
        <li>JavaScript</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>C</li>
        <li>C++</li>
    </ul>
</body>
</html>

Two unordered lists appear. The first list may not show any visual difference due to lack of browser support for marker-offset. The second list shows increased spacing between bullets and text due to the padding-left property.

Example 2: Ordered List with Marker Offset

This example shows the marker-offset property applied to an ordered list

<!DOCTYPE html>
<html>
<head>
<style>
    .old-method {
        marker-offset: 2cm;
    }
    
    .new-method {
        margin-left: 2cm;
    }
</style>
</head>
<body>
    <h3>Deprecated marker-offset</h3>
    <ol class="old-method">
        <li>English</li>
        <li>Hindi</li>
        <li>Gujarati</li>
        <li>Marathi</li>
        <li>Urdu</li>
    </ol>
    
    <h3>Modern alternative with margin-left</h3>
    <ol class="new-method">
        <li>English</li>
        <li>Hindi</li>
        <li>Gujarati</li>
        <li>Marathi</li>
        <li>Urdu</li>
    </ol>
</body>
</html>

Two ordered lists appear. The second list is indented 2cm from the left margin, demonstrating the modern approach to achieving similar spacing effects.

Conclusion

While marker-offset was designed to control the distance between markers and list content, it's now obsolete. Use padding-left or margin-left properties for modern list spacing control.

Shubham Vora

Updated on: 2026-03-15T16:52:13+05:30

286 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next