タイトルは大文字で表示されています。私はこのタイトルと下のフレームボックスの間にちょうど2ピクセルを持っていたいと思います。大文字の周りのスペースを取り除く
テキストに 'g'のような小文字が含まれている場合、下にスペースはありませんが、 'g'、 'y'、 'j'の文字がなくなると表示されます。
このスペースを取り除くためのクロスブラウザ方式はありますか？ Firefoxはhttps://jsfiddle.net/5o94va6p/13/なので、line-height: 0.7のようなトリックは使えますが、Safariではあまりにも多くのスペースを消費します。
SafariとChromeは、空白の点で似ています。異なるブラウザはFirefoxです。私はそれをCSSを使用して行の高さを指定するだけです。この方法では、Firefoxは見栄えがよく、他のブラウザでは見た目に影響しません。
Firefoxのみを対象とします。このコードを試してみてください。これを使用して
@-moz-document url-prefix() {
h1 {
line-height: 0.7
}
}
Firefoxが一方向に、他のすべてのブラウザをもう一方の方法でレンダリングするなら、それはうまくいくでしょう。私は各ブラウザが独自の計算をしていることに気づいており、いくつかの違いがあります。 – Michal
@MichalはMac、Chrome、Safariでの私のテストでは、空きスペースに関してまったく同じように見えました。別のスペースをレンダリングした唯一のブラウザはFirefoxです。 Internet Explorerに関しては、私はそれをテストしなかった、率直に言って、私はもう誰もそれを使用しているとは思わない。 – Ibrahim
ああ、Chrome/WindowsはSafari/macOSよりも多くの領域を提供しているため、OSにも依存しているようです。 – Michal
Y、Gのような手紙のために必要とされるベースラインの下の空間に、pなどをされますいつもそこにはラインハイトの一部があります。これがあなたの問題の理由です。負のマージンボトム値を定義しない限り、変更することはできません。
.my_heading {
margin-bottom: -4px;
}
「テキストが正常であれば」 - それはどういう意味ですか？ – Johannes
ありがとう、私はこれを明示するためにテキストを編集しました。 – Michal