【CSS】line-heightとは?~行間を指定する方法~ | MUKKUN QUEST
MUKKUN QUEST     

【CSS】line-heightとは?~行間を指定する方法~

HTML&CSS

【CSS】line-heightの解説です。読み方は「ラインハイト」です。
行間を指定する方法を知りたい方はこちらで解決します💡

スポンサードサーチ

【CSS】line-height ~行間を指定する方法~

こちらの3行の文字列を例に、具体的に解説していきます。

【実例】line-heightはこう打てば、こうなる


☝このように打つことで
☟このように行と行の間の広さを指定できます。

【使い方】line-heightは実際にこう使う

上の画像の通り、行と行の間の広さを好きに指定できます。

【応用】line-heightで要素の中央に文字を表示させる

上の画像は、高さ150pxに指定したheaderの中に、1行の文字列を入力したものです。上下で見た時に中央に配置できるよう<p>タグに「line-height」でheaderと同じく150pxを指定すると、下の画像のように中央に配置することができます。

【注意】line-heightを使う時に起こりやすいミスの事例

※情報は随時更新します。

line-heightに似た効果を持つCSS

●margin: 0 auto;・・・文字を左右で見た時に中央に指定する方法