Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we will see the property that specifies the distance between the nearest border edges of the marker box and the principal axis. The marker-offset is the property that specifies the distance between the nearest border edges of the marker box and the principal axis.

Syntax:

style=" marker-offset:em/cm";

Example 1: In this example, we will create lists and apply the marker-offset property that is set to 8 em for the unordered list and 6 cm for the ordered list.

HTML

<!DOCTYPE html>
<html>
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <h5>List of available courses</h5>
    <ul style="list-style:inside square; marker-offset:8em;">
        <li>Data Structures & Algorithm</li>
        <li>Web Technology</li>
        <li>Aptitude & Logical Reasoning</li>
        <li>Programming Languages</li>
    </ul>
    <h5>Data Structures topics</h5>
    <ol style="list-style:outside upper-alpha;marker-offset:6cm;">
        <li>Array</li>
        <li>Linked List</li>
        <li>Stacks</li>
        <li>Queues</li>
        <li>Trees</li>
        <li>Graphs</li>
    </ol>
</body>
</html>

                    

Output:         

 

Example 2:In this example, we will create lists and apply the marker-offset property that is set to 0 em for the unordered list and 2 cm for the ordered list.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksforGeeks</title>
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2
    <h5>List of available courses</h5>
    <ul style="list-style:inside square;marker-offset:0em;">
        <li>Data Structures & Algorithm</li>
        <li>Web Technology</li>
        <li>Aptitude & Logical Reasoning</li>
        <li>Programming Languages</li>
    </ul>
    <h5>Data Structures topics</h5>
    <ol style="list-style:outside upper-alpha;marker-offset:2cm;">
        <li>Array</li>
        <li>Linked List</li>
        <li>Stacks</li>
        <li>Queues</li>
        <li>Trees</li>
        <li>Graphs</li>
    </ol>
</body>
</html>

                    

Output:

 



Last Updated : 06 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads