どうも7noteです。CSSで字上げ・字下げする方法。

字送りされた時、こんなふうになってしまうのを解消。

・文字おくりがされるとくずれてしま
います。

これをこうしたい↓。

・文字おくりがされてもくずれないよ
　うになりました！

方法

text-indentを使った方法。

p {
  text-indent: -1em;
  padding-left: 1em;
}

tetx-indentは行の冒頭に余白を入れることができます。
text-indent: 1em;を入れることで１文字分隙間を開けることができます。

今回は逆にtext-indent: -1em;とすることで「・」の分を左に寄せ、全体の左にpaddingを入れることで対応しています。

まとめ

list-styleを使う場合は必要ないですが、疑似要素でアイコンを入れたりした場合にも使うので覚えておいて損はないかなと思います！

おそまつ！