line-heightが効かせる方法

Question

line-heightが効きません。
どうするとよいでしょうか？
よろしくお願いいたします。

.line p {
    line-height: 200%;
    }

<div class="line">
    <p>
        txttxttxttxttxttxttxttxttxt<br>
        txttxttxttxttxttxttxttxttxt<br>
        txttxttxttxttxttxttxttxttxt<br>
    </p>
</div>

Comments

[kei344]

「効きません」とはどのような状況でしょうか。期待されている挙動と実際の挙動を図示または詳細をお書きください。

Answer 1

コード自体は間違っていません。

よくあるパターンとして、、
「<p>要素」に対して他にもCSSで指定しているのではないでしょうか？

CSSの指定方法には優先順位があり、
複数指定がある場合、優先度の高い指定方法が適用されます。

頻繁に使うのは全くオススメしませんが、
先ほどの指定に !important 宣言をつけて優先度を上げて、様子をみてください。

.line p {
line-height: 200% !important;
}

Answer 2

本当に提示のコードのみであれば、問題なく効くはずです。
記述は間違っていませんし、手元で試したところきちんとかかりました。
ほかのところで上書きしてしまっている可能性もありますので、提示のコードだけでは原因は掴めません。

Chromeのデベロッパーツールなどを使用して、対象のp要素にどのようにスタイルがあたっているか確認してみてください。

Answer 3

たとえば、p要素に display: inline が適用されている場合、line-heightの設定が効かなくなります。