CSS – liの位置を内側に調整する

liの位置を内側に調整するにはmarginで調整するかlist-style-position: inside;で内側に調整することができます。細かい調整をしたいのであればmarginを使うのがベストかと思います。

/* marginを使った例 */

margin-left:10px;

margin-left:-20px;

margin-left:2%;

margin-left:-10%;

list-style-positionの場合はliの位置をデフォルトのlist-style-position:outline;からlist-style-position:inside;に変更するだけなので内側の位置調整を数値で調整することはできません。

ul{
  list-style-position:inside;
}


li{
  list-style-position:inside;
}

検証したところliでもulでも反映されていました。

paddingを使うことの悪影響

paddingでも内側に調整することはできるのですがpadding単体だとリストのマーカーとテキストの間に余白が生じます。

ul li{
  padding-left: 20px;
}

この場合の余白の解決策としてはlist-style-positionで調整することができます。

ul li{
  list-style-position: inside;
  padding-left: 20px;
}