Which property specifies the distance between nearest border edges of marker box and principal box ?
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" >w3wiki</ 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 >w3wiki</ title > </ head > < body > < h2 style = "color:green" >w3wiki</ 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:
Contact Us