Exploring List Marker Styling Quirks: The Mystery of the Post-Marker Gap

While exploring Google's web.dev blog's "Creative List Styling" article, I stumbled upon an intriguing detail in the ::marker section's code examples. The ::marker pseudo-element, allowing customization of list markers, presented a peculiar solution for adding spacing after a custom SVG marker:

::marker {
  content: url('/marker.svg') ' ';
}

The space character (" ") appended to the url() function creates the gap. This felt less than ideal; CSS offers margin and padding for spacing. My initial attempt to replace the space with a margin-right failed:

::marker {
  content: url('/marker.svg');
  margin-right: 1ch;
}

::marker's limited CSS property support (primarily text-related) prevents margin and padding from functioning as expected.

This led to a deeper investigation into creating post-marker gaps.

Padding and Margins on <li> and <ol></ol> Elements:

Experiments revealed that padding-left on <li> elements increases the gap after the marker (when list-style-position: outside). Other padding and margin properties affect indentation. Even with padding-left: 0px, a browser-dependent minimum gap persists.

list-style-position: inside:

Moving the marker inside the list item using list-style-position: inside alters the behavior. padding-left now affects spacing before the marker, eliminating control over the post-marker gap. Furthermore, a Chromium bug triples the gap size in this scenario. Browser inconsistencies in gap size are also apparent.

The image below illustrates the default rendering differences across browsers for both outside and inside marker positioning:

[Image comparing browser rendering of list markers would go here]

Custom Markers:

Using list-style-type or the content property on ::marker to define custom markers introduces further nuances. While content offers greater flexibility, Safari's lack of support necessitates using list-style-type for broader compatibility. Replacing the default bullet with "?" (U 2022 Bullet) removes the minimum gap and shrinks the marker size. Adjusting font-size on ::marker causes vertical misalignment, while font-family changes can affect marker size, offering a potential workaround. The Chromium bug is absent when using custom markers with list-style-position: inside.

Key Findings:

<li>Browsers apply default padding-inline-start to <li> and <ol></ol>. <li>A minimum gap exists after built-in markers, but not custom ones. <li> padding-left on <li> controls post-marker gap only with list-style-position: outside. <li>Custom string markers are smaller than built-in markers. font-family adjustments can increase size.

Conclusion:

The space character in the initial code example is a necessary workaround. The lack of margin and padding support on ::marker, especially when list-style-position: inside, limits control over post-marker spacing. Until ::marker gains broader CSS property support, workarounds like using a ::before pseudo-element for marker emulation may be required. Improved ::marker functionality is highly desirable.

The above is the detailed content of Everything You Need to Know About the Gap After the List Marker. For more information, please follow other related articles on the PHP Chinese website!