您需要了解的有關列表標記之後差距的所有信息

探索列表標記樣式怪癖：後標記差距

的奧秘

>在探索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中文網其他相關文章！