Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Which property specifies the distance between nearest border edges of marker box and principal box?
In CSS, the ‘marker-offset’ CSS property is used to specify the distance between the nearest border edges of marker box and principal box. In CSS, the marker is a pseudoelement that refers to the bullet points of the lists.
Here, we will learn to set the distance between the nearest border edges of marker box and principal box.
Syntax
Users can follow the syntax below to set the distance between the nearest border edges of the marker box and the principle box.
marker-offset: value;
Example
In the example below, we have created an unordered list of different programming languages. Also, we have used the ‘marker-offset’ CSS property to set the distance between the nearest edges of the marker box and the principle box.
<html>
<head>
<style>
.list {
marker-offset: 2em;
}
</style>
</head>
<body>
<h3> Using the <i> marker-offset CSS property </i> to specifies the distance between nearest border edges of marker box and principal box in CSS </h3>
<ul class = "list">
<li> JavaScript </li>
<li> HTML </li>
<li> CSS </li>
<li> C </li>
<li> CPP </li>
</ul>
</body>
</html>
Example
In this example, we have used the ‘marker-offset’ CSS property with the ordered list. We have applied an offset of ‘2cm’, which represents the 2 centimetres.
<html>
<head>
<style>
.list {
marker-offset: 2cm;
}
</style>
</head>
<body>
<h3> Using the <i> marker-offset CSS property </i> to specifies the distance between nearest border edges of marker box and principal box in CSS </h3>
<ol class = "list">
<li> English </li>
<li> Hindi </li>
<li> Gujarati </li>
<li> Marathi </li>
<li> Urdu </li>
</ol>
</body>
</html>
Users learned to set the distance between the nearest edges of the marker box and the principle box using ‘marker-offset’ CSS properties.
165 Views
