web-dev-qa-db-ja.com

インラインブロック要素の大きなテキストの上下の空白を削除します

インラインブロックとして定義された単一のspan要素があるとします。内容はプレーンテキストのみです。フォントサイズが非常に大きい場合、ブラウザがテキストの上下に小さなパディングを追加する方法を明確に見ることができます。

HTML：

CSS：

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
}

​
<span>BIG TEXT</span>

ボックスモデルを見ると、ブラウザがコンテンツエッジ内にパディングを追加していることは明らかです。この「パディング」を削除する必要があります。1つの方法は、次のように単純に行の高さを変更することです。

http://jsfiddle.net/7vNpJ/1/

これはChrome=でうまく機能しますが、Firefoxではテキストが上に向かって移動します（FF17、Chrome 23、Mac OSX）。

クロスブラウザソリューションのアイデアはありますか？ありがとう！

htmlcsscss3cross-browser
48
MusikAnimal

フォントを明示的に設定し、line-heightおよび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;
}
<link href='http://fonts.googleapis.com/css?family=Tinos' rel='stylesheet' type='text/css'>
<span>
    BIG TEXT
</span>
38
karacas

ブラウザはパディングを追加していません。代わりに、文字（大文字であっても）は通常、フォントの高さよりも垂直方向の方が一般的にかなり小さく、行の高さは言うまでもなく、通常はフォントの高さ（フォントサイズ）の約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"が収まるように設定しました。文字lookは高さが似ているため、他の大文字よりも垂直方向に少し遠くまで伸びています。 「O」など、他の文字にも同様の問題があります。また、ベースライン（Arial）よりも少し下に伸びるディセンダーがあるため、文字「Q」が必要な場合は設定を調整する必要があります。そして、もちろん、「É」またはほとんどすべての発音区別符号が必要になる場合、問題が発生します。

28
Jukka K. Korpela

私はデザイナーであり、開発者はAndroidを最初に処理するときにこの問題を抱えていましたが、Web開発者も同じ問題を抱えています。テキスト行と別のオブジェクトの間隔（これは、デザインプログラムがテキストの1行の「サイズ」を定義するときに発音区別符を考慮していないためです。

最終的にÊgテキストのすべての行に追加し、actualテキストの上部（つまり、Eのアクセント記号の上部）から「測定」として機能するスペーサー（小さな青い長方形）を手動で作成します。または、ディセンダー（「g」の下部）から。たとえば、長方形だけの本当に退屈なトップナビゲーションがあり、その下に見出しがあるとします。設計プログラムは、上部ナビゲーションの下部と見出しテキストボックスの上部24pxの間のスペースを言うでしょう。ただし、ナビゲーションの下部からÊアクセントマークの上部までを測定する場合、間隔は実際には20ピクセルです。

これはコードソリューションではないことは承知していますが、設計仕様とビルドの外観との矛盾を説明するのに役立つはずです。

See this image for an example of what Sketch does with type

3
Sarah McDermott

同様の問題がありました。行の高さを増やすと、テキストの上のスペースが増えます。パディングではありませんが、コンテンツ間の垂直方向のスペースに影響します。 -veの上部マージンを追加することでうまくいくようです。これは、行の高さの異なるすべてのインスタンスに対して実行する必要があり、フォントファミリによっても異なります。たぶん、これは設計要件を渡すときに設計者がより意識する必要があるものでしょうか？

h1 {
    font-family: 'Garamond Premier Pro Regular';
    font-size: 24px;
    color: #001230;
    line-height: 29px;
    margin-top: -5px;    /* CORRECTION FOR LINE-HEIGHT */
}
2
omar j

テキストが画面幅に比例して拡大縮小する必要がある場合、フォントをsvgとして使用することもできます。イラストレーターなどからエクスポートするだけです。私の場合、これを行う必要がありました。なぜなら、左右の境界線の上部をフォントの上部に揃えたいからです| TEXT | 。行の高さを使用すると、ウィンドウのスケーリング時にテキストが上下にジャンプします。

0
Servus