web-dev-qa-db-ja.com

このテキストの行の高さを小さくできないのはなぜですか？

http://jsfiddle.net/mJxn4/

これは非常に奇妙です：<em>タグでラップされた数行のテキストがあります。私が何をしても、line-heightの値を17pxより低くしても効果はありません。 line-heightupを17pxより大きくすることができ、適用されますが、17pxより低くすることはできません。

問題のCSSは次のとおりです。

#others .item em {
    font-size: 13px;
    line-height: 17px;
}

行の高さを上下に調整し、変更のたびに更新されたフィドルを実行してみてください。そうすれば、意味がわかります。

これはなぜでしょうか？ line-heightはCSSの他の場所で指定されていないため、オーバーライドするものはありません。とにかくそうはなりません。同じセレクター内でline-heightの上下を調整しているので、値が大きいと意味がありません適用されますが、低い値は上書きされます。

cssem
44
daGUY

emタグはインラインであり、その行の高さは親のdivよりも低くできないためです。

たとえば、親の行の高さを10pxに設定すると、emタグの行の高さも10pxに減らすことができます。

62
Ibu

Line-heightプロパティが機能するためには、divにはblockと等しいdisplayプロパティが必要です

.app-button-label{
    line-height: 20px;
    display: block;
 }
14
Ramesh Vishnoi

モバイルビューのdivでこの問題に直面していました-行の高さが大きすぎて、行の高さが機能していませんでした！ここでのアドバイスに従って、「display：block」を追加して機能させることができました： CSSプロパティ「line-height」がChromeで狭い行スペースを作成できないのはなぜですか？

これが将来同じ問題に直面している他の誰にも役立つことを願っています

11
Grace

それを行う最良の方法は、CSSリセットを使用することです。

独自に作成するか、人気のあるものを使用してください

http://meyerweb.com/eric/tools/css/reset/

0
user1607528

Jsfiddleでnormalized cssオプションを使用しているようです-これはリセットされるCSSルールに相当します-ala http://meyerweb.com/eric/ tools/css/reset /

リセットをリセットするか、本当に必要な場合は別のリセットを使用できます。

詳細はこちらをご覧ください：

http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

0
jrd1