大きなインラインブロックテキストの周囲の余分な空白パディングを削除するにはどうすればよいですか?

インライン ブロックの大きなテキストの空白パディングを解決する

インライン ブロック要素では、上下に余分な空白が埋め込まれる問題が発生することがよくあります特にフォント サイズが特に大きい場合。この「パディング」はコンテンツの端内に表示され、テキストの周囲に目立つマージンが残ります。

この不要なパディングを除去するための 1 つの解決策は、次のコード スニペットに示すように、行の高さを調整することです。

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

このアプローチは Chrome では有効であることが証明されていますが、Firefox ではテキストが上部に移動するという問題が発生します。このブラウザ間の不一致に対処するには、更新されたコード スニペットに見られるように、フォントを明示的に定義する必要があります。

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  font-family: 'Times New Roman';  // Explicitly set the font
  line-height: 34px;
  height: 35px;
}

特定のフォントを指定し、行の高さと高さの両方を調整することにより、このコードにより、フォント サイズやブラウザーの種類に関係なく、インライン ブロック テキスト要素の周囲に一貫した正確な間隔が確保されます。

以上が大きなインラインブロックテキストの周囲の余分な空白パディングを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。