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: