リスト要素のマーカー位置を崩さず調整する最適な方法

リスト要素の見た目を整える際、list-style-positionの扱いで悩むことが多い。特にinsideを指定すると、行が折り返されたときにマーカー（●・■など）の下へ文字が潜り込み、読みづらいレイアウトになってしまう。

そのため、基本はlist-style-position: outside;のまま使用し、必要に応じて<li>に余白を付けて位置を調整する方法がもっとも安定する。

li {
  margin-inline-start: 1em;
}

li {
  margin-inline-start: 1em;
}

margin-inline-startを使うメリットは次のとおり。

• マーカーの位置を自然に右へずらせる
• <li>のfont-sizeが変わっても破綻しない
• リストマーカーそのものをいじらずにデザインを調整できる

リスト要素をカスタマイズするときは、マーカー位置をinsideに変えるよりも、outsideを維持したまま余白で調整するほうが、見た目も挙動も安定する。