Q&A
現状のHTMLとCSSを提示して、それがどのように希望と異なるかを具体的に説明してください。
でないと回答は難しいと思います。
デザイン通りにコーディングしたいのですが、line-heightが原因でfont-sizeより要素の高さが高くなってしまいます。
line-height: 1に指定すればfont-sizeの高さになるようですが、この要素が2行以上で表示されるとなると行間が窮屈になってしまいます。
どうやって調整すべきでしょうか？
line-height分を計算してpaddingなどを引くとかですか？
ちなみにリセットCSS等は使っていません。
業務のものなので、コードは載せられないですが調べたら似たような内容がありました！やはりpaddingの調整になりそうです。
業務のものをそのまま載せなくても、現象が再現できるHTMLとCSSを提示すればいいだけです。
あと、ボックス内でテキストが上よりに表示されるというように説明してもらえれば適切な回答を得られたでしょう。
次回、質問するときにご留意ください。
今後は分かりやすい質問心がけます。
回答2件
0
ベストアンサー
https://www.marineroad.com/staff-blog/21953.html
計算してpaddingで高さ調整しようと思います。
投稿2019/10/10 15:07
退会済みユーザー
総合スコア0
0
なぜ、高くなるのかが分かりません。
値の指定がダメなのでは？
CSS
1line-height: 150%
とかいろいろ値を変えてみてください。
どれがちょうどいいかは質問者さんによります。
投稿2019/10/10 11:15
総合スコア10429
個人的には%指定をよくします。
line-heightをいじれば高さはfont-sizeと同じになります。高さは揃います。
ただ、その要素が複数行表示だと行間が狭くなるのでいい方法がないかと思いました。
font-sizeと同じになるという意味がわかりません。
値の指定が悪いのでは？
普通、line-heightをおっきくしたら複数行にしても行間は広がります。
https://codepen.io/asuchi0819/pen/mddexRd
サンプルです。
line-height: 1;で行間をなくしてfontと同じ高さになります
例えばですが、テラテイルのこのページの質問タイトルはh2でfont-size: 24pxです。しかしh2要素そのものの高さは38pxになります。
この原因がline-heightです。
line-height: 1;にするとfont-sizeと同じ24pxになります。
ただ、この場合複数行の場合行間がなくなってしまいます。
デザインカンプ通りにコードを書くには、line-heightを調整するのではなく、この調整をpaddingなどで調整すべきという考えにいきつきました
ちょっと話が噛み合っていません。
line-heightというのは規定の行間を1とした時にどのくらいの幅にするかを指定するものです。
なのでline-height: 2とすれば2倍の幅になりますしline-height: 0.5とすれば半分になります。
なぜline-height: 1にこだわるのか その理由をお聞かせ願いたい。
質問の仕方が悪かったかもしれません。
line-heightをいじれば行間を狭めたり、広げたりできるのは理解してます。
例えばですがh3タグにfont-size: 20pxと指定するとh3の要素自体の高さは30pxになります。
デザイン通りにコードを書く際、この10px分をどこで調整すべきかという意味で質問しました。
line-height: 1;話したのは、これは指定することでh3タグの要素の高さが20pxになるからです。
ただline-heightで調整しているため複数行だと窮屈な表示になってしまします。
そのため、この高くなった10px分をどこで調整するのがいいのかを質問しました。
結果ずれた分を計算してpaddingなどで調整すべきなのかなと思いました。
あなたの回答
tips
プレビュー
