css - リスト項目の後のスペース

Question

箇条書きが終わってからテキストが始まるまでのギャップをブラウザ間で正規化しようとしています。現在、弾丸の後に大きなギャップがあります。リスト項目間のギャップを見ているのではなく、リスト項目の箇条書きとテキストの間のギャップを見ていることに注意してください。

1. <--- ここのギャップ
2. リスト項目
3. リスト項目

Answer 1

CSSのtext-indentプロパティを使用して、要素のテキスト コンテンツの最初の行の開始前にテキストを水平方向にどれだけ移動するかを指定します。

li {
  text-indent: 5px;
}

<ol>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ol>