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

Last Updated : 06 Jun, 2022

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> 