HTMLの箇条書き（ul・liタグ）の行間・インデントを調整する方法！

HTMLで箇条書きを表示させるulタグliタグですが、その余白の調整や行間・インデントの調整をして揃えたいときがあります。

今回はHTMLの箇条書きの余白の調整方法について紹介していきます。

まずは箇条書きのインデントを調整してきます。段落などのテキストのインデントの調整方法（text-indentを使う場合）とは少し異なります。

箇条書きのインデントを調整するにはCSSの内部的な余白を調整することができるpaddingを使っていきます。

箇条書きのアイテムのliに対して左側のpaddingであるpadding-leftを設定しています。すると「●」とテキスト部分までの余白が調整することが出来ます。

このようにliタグに対してのpaddingで箇条書きのインデントを調整していきます。

それではインデント以外のul・liタグでよく出てくる余白の調整方法を紹介していきます。

上記の余白を調整するにはpaddingでulタグ自体に左側の余白をつけるようにします。

上記例ではulタグの左側に60pxの余白をもうけています。

アイテム間の間隔の調整にはliタグに対して上下の余白を設けます。

上記の例ではliタグの上下にそれぞれ20pxの余白を入れています。このようにliタグに対しての上下の余白調整でアイテム間の間隔調整をしていきましょう。

最後は箇条書きの行間の調整です。

行間の隙間の余白調整は、通常のテキストと同じくline-heightを利用します。

いかがでしたでしょうか。箇条書きでは調整すべき余白の種類が多く「どのタグに適用するのか？」「marginだっけ？paddingだっけ」となる事が初心者のなれないうちは多いです。

ぜひ今回の記事を参考に箇条書きののインデント・余白の調整をしていきましょう！