css - どのようにすることができます

Question

の周りに境界線を作成しようとしていますが、<H2>境界線は常にテキストよりもはるかに大きくレンダリングされ<h2>ます。サイズはどこにも設定されていません。H2には25pxのフォントサイズの1文のテキストが含まれており、Chromeデベロッパーツール->メトリクスでH2のサイズが980x183であると報告されます。これは、テキストを超えて右端まで広がっていることがわかります。テキストを画面の上部に移動し、テキストのはるか左に移動します。

では、サイズが設定されていない場合、H2要素の領域をテキストよりもはるかに大きくするにはどうすればよいでしょうか。誰かがこれに答えるためにもっと多くのコンテキストを提供する必要があるかもしれませんが、質問は独立しているはずです。

H2を含むの<div>は0pxx0pxで、これも少し頭を悩ませますが、私はかなりググってみましたが、それが関係している可能性は低いと感じています。

Answer 1

CSSを追加してみてください：

 h2 { display: inline; padding:0;margin:0} 

h2要素は、デフォルトのマージンとパディングでブロックとして表示されます

Answer 2

<h1>はブロックレベルの要素であり、デフォルトではコンテナの全幅に拡張されます。h2 これは、ボックスとh2 テキストの幅が同じではないことを意味します。

特定のケースについてはわかりませんが、display設定をinlineまたはに変更しinline-blockて、それらの結果を試してみることをお勧めします。