Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Set the distance between the marker and the text relating to that marker with CSS

Javascript Web Development Front End Scripts

The marker-offset property was a CSS property designed to control the distance between list markers and their associated text content. However, this property has been deprecated and is no longer supported in modern browsers.

What was marker-offset?

The marker-offset property was intended to set the spacing between the list marker (bullet, number, etc.) and the text content of list items. It accepted length values like pixels, ems, or centimeters.

Syntax (Deprecated)

marker-offset: <length> | auto;

Example (No Longer Works)

This code demonstrates how marker-offset was supposed to work, but it will not function in modern browsers:

<html>
   <head>
   </head>
   <body>
      <ul style="list-style: inside square; marker-offset: 3em;">
         <li>UK</li>
         <li>US</li>
      </ul>
      <ol style="list-style: outside upper-alpha; marker-offset: 3cm;">
         <li>UK</li>
         <li>US</li>
      </ol>
   </body>
</html>

Modern Alternatives

Instead of marker-offset, use these CSS properties to control list marker spacing:

Using padding-left

<html>
   <head>
      <style>
         .custom-list {
            list-style-position: outside;
            padding-left: 2em;
         }
      </style>
   </head>
   <body>
      <ul class="custom-list">
         <li>UK</li>
         <li>US</li>
      </ul>
   </body>
</html>

Using text-indent

<html>
   <head>
      <style>
         .indent-list li {
            text-indent: 1.5em;
            list-style-position: inside;
         }
      </style>
   </head>
   <body>
      <ul class="indent-list">
         <li>UK</li>
         <li>US</li>
      </ul>
   </body>
</html>

Browser Compatibility

Property Status Modern Support
marker-offset Deprecated None
padding-left Active All browsers
text-indent Active All browsers

Conclusion

The marker-offset property is obsolete and should not be used. Use padding-left or text-indent to control spacing between list markers and text in modern web development.

Updated on: 2026-03-15T23:18:59+05:30

428 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements