您需要了解的有关列表标记之后差距的所有信息

探索列表标记样式怪癖：后标记差距

的奥秘

>在探索Google的Web.dev博客的“创意列表样式”文章时，我偶然发现了::marker章节的代码示例中的一个有趣的细节。 允许自定义列表标记的::markerpseudo-element提出了一个特殊的解决方案，用于在自定义SVG标记后添加间距：>

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

>

函数的空格字符（“”）创建差距。 这感觉不理想。 CSS提供url()和margin用于间距。 我最初用padding> margin-right替换空间的尝试：

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

::marker>的有限CSS属性支持（主要是与文本相关的）预防margin>和padding>按预期运行。

这导致了对创建标志后差距的更深入的调查。

> >和元素上的填充和边缘：<li><ol></ol> >实验表明，

padding-left元素在标记后增加了gap<li>（当>时）。其他填充和边缘特性会影响压痕。 即使有，依赖浏览器的最小间隙仍然存在。list-style-position: outside> padding-left: 0px

： list-style-position: inside >使用

在内部移动标记

在内部改变了行为。 现在会影响标记之前的间距list-style-position: inside，从而消除了对后标记缝隙的控制。 此外，在这种情况下，铬虫的差距大小三倍。 差距大小的浏览器不一致也很明显。padding-left 下面的图表说明了>和

标记定位的浏览器之间的默认渲染差异：

outside[比较列表标记的浏览器渲染的图像将进入此处] inside

自定义标记：

使用>或

定义自定义标记的属性会引入进一步的细微差别。 尽管

提供了更大的灵活性，但Safari缺乏支持需要使用以实现更广泛的兼容性。 用“•”（U 2022子弹）替换默认子弹可以消除最小间隙并收缩标记尺寸。 调整list-style-type>会导致垂直错位，而content变化会影响标记大小，从而提供潜在的解决方法。 使用::marker>的自定义标记时，铬错误是不存在的 content list-style-type键调查结果： font-size

<li>>浏览器将默认padding-inline-start应用于 <li> 和<ol></ol>>。 内置标记后存在最小差距，但不是自定义标记。 仅用<li>。 自定义字符串标记比内置标记小。 <li>调整可以增加尺寸。padding-left <li> list-style-position: outside 结论： <li> font-family初始代码示例中的空格字符是必要的解决方法。 缺乏和

对>的支持，尤其是在

>时，限制了对标记后间距的控制。 在获得更广泛的CSS属性支持之前，可能需要使用A pseudo元素进行标记仿真之类的解决方法。 改进的功能是高度可取的。>

以上是您需要了解的有关列表标记之后差距的所有信息的详细内容。更多信息请关注PHP中文网其他相关文章！