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

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!