CSSで行の高さを調整するやり方
CSSで行の高さを調整するやり方をみていきましょう。
CSSで行の高さを調整するやり方
CSSで行の高さを調整する場合、line-heightプロパティを使います。
line-heightは複数の行が同じ高さになるので、行間の設定によく使われます。
<h1>CSSの練習</h1>
<p>CSSで行の高さを調整する場合、line-heightプロパティを使います。</p>p {
font-size: 16px;
line-height: 48px; /*line-height: 3em;
もしくは line-height: 3;でも可*/
background-color: pink;
}emというのは、1文字分を表します。文字サイズを何倍にするか設定できます。単位なしでも設定された文字情報の何倍か表すことができます。
line-height: 3という
単位がないのはわかりにくいのではないかと思うかもしれませんが、単位なしでも実はよく使われます。
emで単位をつける場合とつけない場合で大きくかわること
emで単位をつけるつけないは、CSSのスタイルの継承時に大きく影響します。
次のケースの場合をみてみましょう。
line-height: 2emの場合、親要素で指定したフォントサイズの2emとなり、60pxをline-heightで指定していることになり、それを子要素にも適用することになります。つまり、sectionもline-heightを60pxで指定していることになります。
その一方で、line-height: 2と単位なしにした場合、設定された文字情報の2倍という意味だけが継承されるので、sectionもline-heightは16pxの2倍の32pxになります。 こちらのほうが自然なので、line-heightは単位なしで利用されるケースも多いです。
<body>
<h1>CSSの練習</h1>
<p>line-height: は単位なしで利用されるケースも多いです。</p>
<main>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こ>にちは。</p>
<section>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは>こんにちは。</p>
</section>
</main>
</body>main {
font-size: 30px;
/* line-height: 2em; */
line-height: 2;
}
section {
font-size: 16px;
}