Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Last Updated : 06 Jun, 2022
View Discussion
Improve Article
Save Article

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:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!