关于列表标记后的间隙你需要知道的一切

我正在读书 “创意列表样式” 在 Google 的 web.dev 博客上，注意到其中的一个代码示例有些奇怪 ::marker 文章的一部分。 内置的列表标记是项目符号、序号和字母。 这 ::marker 伪元素允许我们设置这些标记的样式或用自定义字符或图像替换它们。

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

引起我注意的示例使用 SVG 图标作为列表项的自定义标记。 但是还有一个空格字符（" ") 在旁边的 CSS 值中 url() 功能。 这个空间的目的似乎是在自定义标记之后插入一个间隙。

当我看到这段代码时，我立即想知道是否有更好的方法来创建间隙。 追加一个空格 content 感觉更像是一种解决方法，而不是最佳解决方案。 CSS提供 margin 和 padding 以及其他在页面上分隔元素的标准方法。 在这种情况下不能使用这些属性吗？

首先，我尝试用适当的边距替换空格字符：

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

这没有用。 事实证明， ::marker 只支持一个 一小组主要与文本相关的 CSS 属性. 例如，您可以更改 font-size 和 color 标记，并通过设置定义自定义标记 content 到字符串或 URL，如上所示。 但是 margin 和 padding 属性是 不支持, 所以设置它们没有效果。 多么令人失望。

难道空格字符真的是在自定义标记后插入间隙的唯一方法吗？ 我需要找出答案。 在研究这个主题时，我有了一些有趣的发现，我想在本文中与大家分享。

添加填充和边距

首先，让我们确认一下 margin 和 padding 做的 <ul> 和 <li> 元素。 为此，我创建了一个测试页。 拖动相关的滑块并观察对列表标记每侧间距的影响。 提示：随意使用“重置”按钮将所有控件重置为其初始值。

请注意： 浏览器应用默认值 padding-inline-left of 40px 至 <ol> 和 <ul> 元素。 合乎逻辑的 padding-inline-left 财产等同于物理 padding-left 具有从左到右内联方向的书写系统中的属性。 在这篇文章中，为了简单起见，我将使用物理属性。

正如你可以看到， padding-left on <li> 增加列表标记后的空隙。 其他三个属性控制标记左侧的间距，换句话说，列表项的缩进。

请注意，即使列表项的 padding-left is 0px, 标记后仍有最小间隙。 这个差距不能减少 margin or padding. 最小间隙的确切长度取决于浏览器。

总而言之，列表项的内容位于浏览器特定的距标记的最小距离处，并且可以通过添加 padding-left 至 <li>.

接下来，让我们看看当我们定位标记时会发生什么 内 列表项。

在列表项内移动标记

list-style-position 属性接受两个关键字： outside，这是默认值，并且 inside, 它将标记移动到列表项内。 后者对于创建具有全角列表项的设计很有用。

如果标记现在 内 列表项，这是否意味着 padding-left on <li> 不再增加标记后的间隙？ 让我们找出来。 在我的测试页面上，打开 list-style-position: inside 通过复选框。 四人如何 padding 和 margin 受此更改影响的属性？

正如你可以看到， padding-left on <li> 现在将间距增加到 左 的标记。 这意味着我们失去了在标记之后增加间隙的能力。 在这种情况下，能够添加 margin-right 到 ::marker 本身，但这不起作用，正如我们在上面建立的那样。

此外，还有一个 Chromium 中的错误 这会导致标记后的间隙 三重 切换到 inside 定位。 默认情况下，间隙的长度约为文本大小的三分之一。 所以在默认情况下 font-size of 16px, 差距大约是 5.5px. 切换到后 inside, 差距增长到满 16px 在铬中。 这个错误影响 disc, circle及 square 标记，但是 不是序数标记.

下图显示了 macOS 上三个主要浏览器中外部和内部定位列表标记的默认呈现。 为方便起见，我已将所有列表项在其标记上水平对齐，以便更容易比较间隙大小的差异。

总结一下，切换到 list-style-position: inside 引入两个问题。 我们不能再通过增加差距 padding-left on <li>, 并且间隙大小在浏览器之间不一致。

最后，让我们看看用自定义标记替换默认列表标记时会发生什么。

切换到自定义标记

有两种方法可以定义一个 自定义标记:

• list-style-type 和 list-style-image
• content 上的财产 ::marker 伪元素

content 属性更强大。 例如，它允许我们使用 counter() 函数访问列表项的序号（ 含蓄 list-item 对付) 并用自定义字符串装饰它。

不幸的是，Safari 不支持 content 财产在 ::marker 然而 （WebKit 错误). 出于这个原因，我将使用 list-style-type 属性来定义自定义标记。 您仍然可以使用 ::marker 选择器来设置通过声明的自定义标记的样式 list-style-type. 那个方面 ::marker 在 Safari 中受支持。

任何 Unicode 字符都可以用作自定义列表标记，但实际上只有一小部分字符的正式名称中包含“Bullet”，因此我想将它们编译在这里以供参考。

字符	名字	代码点	CSS关键字
•	子弹	U+2022	disc
‣	三角子弹	U+2023
⁃	连字符项目符号	U+2043
⁌	黑色向左子弹	U+204C
⁍	黑色向右子弹	U+204D
◘	逆子弹	U+25D8
•	白子弹	U+25E6	circle
☙	反向旋转花卉心形子弹	U+2619
❥	旋转重型黑色心形子弹	U+2765
❧	旋转花心子弹	U+2767
⦾	带圆圈的白色子弹	U+29BE
⦿	带圆圈的子弹	U+29BF

请注意： CSS square 关键字在 Unicode 中没有相应的“项目符号”字符。 最接近的角色是黑色小方块 (▪️) 表情符号 (U+25AA).

现在让我们看看当我们将默认列表标记替换为 list-style-type: "•" (U+2022 子弹）。 这是与默认项目符号相同的字符，因此应该没有任何重大的渲染差异。 在我的测试页面上，打开 list-style-type 选项并观察标记的任何变化。

如您所见，有两个重大变化：

1. 标记后不再有最小间隙。
2. 子弹变小了，就好像它被渲染成一个更小的 font-size.

根据 CSS 计数器样式第 3 级, 默认列表标记 (disc) 应该是“类似于 • U+2022 子弹”。 似乎浏览器增加了默认项目符号的大小以使其更易读。 Firefox 甚至使用了一种特殊的字体， -moz-bullet-font, 为标记。

尺寸小的问题可以用 CSS 解决吗？ 在我的测试页面上，打开标记样式并观察当您更改 font-size, line-height及 font-family 的标记。

如您所见，增加 font-size 导致自定义标记垂直错位，并且无法通过减小 line-height。 该 vertical-align 可以轻松解决此问题的属性不受支持 ::marker.

但是你有没有注意到改变 font-family 会导致marker变大？ 尝试将其设置为 Tahoma. 对于小尺寸问题，这可能是一个足够好的解决方法，尽管我还没有测试哪种字体在主要浏览器和操作系统上效果最好。

您可能还注意到，当您将标记放置在列表项内时，Chromium 错误不再发生。 这意味着自定义标记可以作为此错误的解决方法。 这让我想到了主要问题，也是我开始研究这个话题的原因。 如果您定义自定义标记并将其放置在列表项内，则标记后没有间隙，也无法通过标准方式插入间隙。

1. 自定义标记后没有最小间隙。
2. ::marker 不支持 padding or margin.
3. padding-left on <li> 不会增加间隙，因为标记已定位 inside.

总结

以下是我在文章中提到的所有关键事实的摘要：

1. 浏览器应用默认值 padding-inline-start of 40px 至 <ul> 和 <ol> 元素。
2. 内置列表标记（disc, decimal， ETC。）。 自定义标记（字符串或 URL）后没有最小间隙。
3. 可以通过添加一个来增加间隙的长度 padding-left 至 <ul>，但前提是标记位于列表项之外（默认模式）。
4. 自定义字符串标记的默认大小小于内置标记。 改变 font-family on ::marker 可以增加它们的大小。

结论

回顾文章开头的代码示例，我想我现在明白为什么在 content 价值。 没有比在 SVG 标记后插入空隙更好的方法了。 这是一个需要的解决方法，因为没有多少 margin 和 padding 可以在位于列表项内的自定义标记之后创建间隙。 A margin-right on ::marker 可以轻松做到，但不支持。

直到 ::marker 添加对更多属性的支持，Web 开发人员通常别无选择，只能隐藏标记并使用 ::before 伪元素。 我最近不得不自己做，因为我无法更改标记的 background-color. 希望我们不必等待更强大的时间太久 ::marker 伪元素。

• SEO 支持的内容和 PR 分发。 今天得到放大。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
• Sumber: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/