86
4

9 に答える 9

68

line-heightフォントを明示的に設定し、必要に応じてandを変更する必要があるように見えheightます。「Times New Roman」がブラウザのデフォルト フォントであると仮定します。

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  /*new:*/
  font-family: 'Times New Roman';
  line-height: 34px;
  height: 35px;
}
<span>
    BIG TEXT
</span>

于 2012-12-27T21:15:35.583 に答える
42

ブラウザはパディングを追加していません。代わりに、文字 (大文字であっても) は通常、フォントの高さよりも垂直方向にかなり小さく、行の高さは言うまでもなく、通常、デフォルトではフォントの高さ (フォント サイズ) の約 1.2 倍です。

フォントが異なるため、これに対する一般的な解決策はありません。フォントサイズが固定でも、フォントによって文字の高さが異なります。また、大文字はフォント内で同じ高さである必要はありません。

実際的な解決策は実験によって見つけることができますが、フォントに依存することは避けられません。行の高さをフォント サイズより本質的に小さく設定する必要があります。以下は、Arial フォントの場合、Windows のさまざまなブラウザーで望ましい結果をもたらすようです。

span.foo
{
  display: inline-block;
  font-size: 50px;
  background-color: green;
  line-height: 0.75em;
  font-family: Arial;
}

span.bar
{
  position: relative;
  bottom: -0.02em;
}
<span class=foo><span class=bar>BIG TEXT</span></span>

ネストされたspan要素は、テキストを垂直方向に移動するために使用されます。それ以外の場合、テキストはベースライン上にあり、ベースラインの下にはディセンダー用のスペースが確保されています (文字 j と y のように)。

よく見ると（拡大して）、ほとんどの文字の上下に非常に小さなスペースがあることがわかります。「G」の文字が収まるように設定しています。他の大文字よりも縦に長く伸びているのは、文字の高さが似ているからです。「O」のような他の文字にも同様の問題があります。また、文字「Q」が必要な場合は、設定を調整する必要があります。これは、ベースラインより少し下に伸びるディセンダーがあるためです (Arial で)。そしてもちろん、「É」やほとんどすべての分音記号が必要になった場合は、問題が発生します。

于 2012-12-27T22:11:25.917 に答える
2

これは私のために働いた：

line-height: 80%;
于 2020-05-23T21:13:09.127 に答える
1

最良の方法は、表示を使用することです。

inline-block;

と

overflow: hidden;
于 2020-11-08T08:36:21.877 に答える
-3

私はしばしばこの問題に悩まされてきました。Vertical-align は下と中央でのみ機能し、上では機能しません! :-(

テーブル要素と自由な段落要素の両方で機能するソリューションを見つけたようです。少なくともここで同様の問題について話していることを願っています。

CSS:

p {
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    background: #FFFFFF;
    margin: 0
    margin-top: 3px;
    margin-bottom: 10px;
}

私にとっては、「p>.../p>」コードをどこに置いても、マージン設定で整理されました。

お役に立てれば...

于 2014-02-20T03:41:21.137 に答える