どうも7noteです。CSSで字上げ・字下げする方法。
字送りされた時、こんなふうになってしまうのを解消。
・文字おくりがされるとくずれてしま
います。
これをこうしたい↓。
・文字おくりがされてもくずれないよ
うになりました!
方法
text-indent
を使った方法。
p {
text-indent: -1em;
padding-left: 1em;
}
![reslut.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fbc675174-6c38-67b4-41a7-68376830ef34.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f01dd8366d484fdcb3b7446fef42a90d)
tetx-indent
は行の冒頭に余白を入れることができます。text-indent: 1em;
を入れることで1文字分隙間を開けることができます。
今回は逆にtext-indent: -1em;
とすることで「・」の分を左に寄せ、全体の左にpaddingを入れることで対応しています。
まとめ
list-styleを使う場合は必要ないですが、疑似要素でアイコンを入れたりした場合にも使うので覚えておいて損はないかなと思います!
![reslut2.jpg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fe38df11b-77c4-0def-aaa9-01028d1acc4f.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e98f6c9725029a603db7644ac37fc29b)