CSS Basics: marker-offset

In CSS, the marker-offset property is used to specify the distance between the marker box and the principal box in a list item. It allows you to control the positioning of the marker relative to the content of the list item.

Understanding marker-offset

When you create a list using HTML, each list item is typically preceded by a marker, such as a bullet point or a number. The marker-offset property allows you to adjust the position of this marker.

The marker-offset property takes a length value, which can be specified in pixels, percentages, or other CSS units. A positive value moves the marker away from the content, while a negative value brings it closer.

It's important to note that the marker-offset property only applies to list items that have a display value of list-item. It does not affect other elements or pseudo-elements.

Examples

Let's take a look at some examples to understand how the marker-offset property works:

<style>
  ul {
    list-style-type: square;
  }

  li {
    marker-offset: 10px;
  }
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

In this example, the marker offset is set to 10 pixels. As a result, the marker box for each list item will be positioned 10 pixels away from the content.

Here's another example:

<style>
  ol {
    list-style-type: decimal;
  }

  li {
    marker-offset: -5px;
  }
</style>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

In this case, the marker offset is set to -5 pixels. As a result, the marker box for each list item will be positioned 5 pixels closer to the content.

Conclusion

The marker-offset property in CSS allows you to control the positioning of the marker in a list item. By adjusting the distance between the marker box and the content, you can customize the appearance of your lists.

For more information on CSS and VPS hosting solutions, visit Server.HK.