はdivの

Question

ここ

内のテキストの上に空白を取り除くクローム開発ツールによって示されるようにdivタグのバウンディングボックスです。 font-sizeとline-heightはともに100pxに設定されています。 marginおよびpaddingプロパティは0に設定されています。 div要素は、Webページ上に絶対配置されています。

テキストを境界ボックスの上部から右に開始するにはどうすればよいですか？私は "S"文字の上に空白を取り除く必要があります。

空白を取り除くことが不可能な場合、高さを計算する方法はありますか？ここで

は、問題を示すフィドルです： https://jsfiddle.net/zw4g1uuj/

Answer 1

行の高さは、あなたが空白を見ている理由として主な要因であるかもしれないことをごJSFiddleを見ながら、私は気づきました。フォントサイズ100では、divのバウンディングボックスがテキストにフィットし、ラインハイト100の中心に配置されます。問題は、無限の高さのdivがある場合です（この場合、テキストはボックスあなたがそれを必要としないときに空白を上部に表示させるdiv（線高）のサイズにさらに別の要素を追加しています。ラインフィートを減らすことで、JSFiddleで80とすると、簡単に一番上の空白を減らすことができます。

divを固定高さ120、境界線を120に設定すると、テキストは中央になり、上下に均等な間隔があります。ボックスの固定サイズをフォントのサイズに近づけて小さくし、線幅を調整することで、より多くの空白を詰めることができます。

これは、より厄介なCSSの一部です。私はいつも線高さの挙動を予測するのに困っていたので、これを実験するのが最善です。親コンテナからのCSSコードまたは問題の要素をどのように設計したかによって、その要素に干渉する可能性があります。

だけでなく、フォントは簡単に空白を追加することができます。その理由は、本質的にCSSに間違っているわけではないからです。

Answer 2

あなたが探しているものが見つかるまで、あなたのフォントサイズとラインの高さの両方を再生する必要があります。 JSFiddleでこれをスタイルに使用してください。

font-size: 100px; 
line-height: 75px; 
border: 1px solid red;