リストマーカーの後にギャップについて知る必要があるすべて

リストマーカースタイリングの癖：マーカー後のギャップの謎

GoogleのWeb.Devブログの「Creative List Styling」の記事を探索している間、::markerセクションのコード例で興味深い詳細を見つけました。 リストマーカーのカスタマイズを許可する::marker pseudo-elementは、カスタムSVGマーカーの後に間隔を追加するための独特のソリューションを提示しました。

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

関数に追加されたスペース文字（ ""）がギャップを作成します。 これは理想的ではないと感じました。 CSSは、間隔にurl()およびmarginを提供します。 スペースをpaddingに置き換えようとする私の最初の試みは失敗しました：margin-right

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

's Limited CSSプロパティサポート（主にテキスト関連）は、::markerおよびmarginが予想どおりに機能することを防ぎます。 paddingこれにより、マーカー後のギャップの作成に関するより深い調査が行われました。

および

要素のパディングとマージン：<li> <ol></ol>実験では、要素の

がpadding-leftの後にギャップを増加させることが明らかになりました。他のパディングとマージンの特性は、インデントに影響します。 <li>であっても、ブラウザ依存の最小ギャップは持続します。 list-style-position: outsidepadding-left: 0px：

マーカーの移動list-style-position: inside内側

を使用してリスト項目は動作を変化させます。

マーカーの前の間隔に影響を及ぼし、マーカー後のギャップの制御を排除します。 さらに、クロムのバグは、このシナリオのギャップサイズを3倍にします。 ギャップサイズのブラウザの矛盾も明らかです 以下の画像は、list-style-position: insideおよびpadding-leftマーカーの両方の位置の両方のブラウザ間のデフォルトのレンダリングの違いを示しています： [リストマーカーのブラウザのレンダリングを比較する画像はこちらをここに移動します]

outsideカスタムマーカー：inside

カスタムマーカーを定義するために

または

プロパティを使用して、さらなるニュアンスが導入されます。

はより大きな柔軟性を提供しますが、Safariのサポートの欠如は、より広い互換性のためにを使用する必要があります。 デフォルトの弾丸を「•」（U 2022弾丸）に置き換えると、最小ギャップが削除され、マーカーサイズが縮小します。 に

を調整すると、垂直の不整合が発生しますが、

の変更はマーカーサイズに影響を及ぼし、潜在的な回避策を提供します。 カスタムマーカーを使用すると、list-style-type。 content::marker重要な調査結果：content list-style-type

<li>ブラウザは、デフォルトを適用してくださいpadding-inline-startに <li> および<ol></ol>。 <li>内蔵マーカーの後に最小ギャップは存在しますが、カスタムのギャップは存在しません。 <code> on<li> padding-leftcode>マーカー後のギャップを制御する<li>。list-style-position: outside カスタム文字列マーカーは、内蔵マーカーよりも小さいです。 <li>調整はサイズを増加させる可能性があります。font-family

結論：

初期コードの例のスペース文字は、必要な回避策です。 特に

の場合、marginのサポートの欠如は、ポストマーカーの間隔の制御を制限します。 より広範なCSSプロパティサポートを獲得するまで、マーカーエミュレーションにpadding擬似エレメントを使用するなどの回避策が必要になる場合があります。 改善された::marker機能は非常に望ましいです。list-style-position: inside

以上がリストマーカーの後にギャップについて知る必要があるすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。