私の SVG の Div の下に余分なスペースがあるのはなぜですか? それを修正するにはどうすればよいですか?

Div コンテナ内の SVG 要素の下の余分な垂直スペースの削除

Web 開発では、div コンテナ内の SVG 要素の下に余分なスペースが発生すると、イライラする問題になることがあります。この問題は、SVG 要素のインラインの性質が原因で発生し、テキストのベースラインに合わせて配置されます。

例:

次のコード スニペットを考えてみましょう:

<div>

Firefox または Chrome で表示すると、青い SVG 要素の下に赤いスペースのセクションがあることに気づくでしょう。この余分なスペースは、文字ディセンダ (文字 "y" の末尾など) のために予約されている領域を表します。

解決策:

この余分なスペースを削除するには、次のようにします。 SVG 要素の表示プロパティをブロックに設定する必要があります。これにより、SVG 要素がブロック レベルの要素として動作し、その親コン​​テナの利用可能な幅全体を占めることができます。

<div>

この手法を適用すると、SVG 要素の下に余分なスペースが表示されるのを防ぐことができます。 div コンテナの上部と同じ高さになるように配置します。

追加オプション:

SVG 要素をインラインまたはインラインブロックに保持したい場合は、vertical-align プロパティを使用して親コンテナーの上部に揃えることができます。

<div>

このメソッドは、display: block を設定するのと同じ結果を達成しますが、SVG 要素はインラインまたはインラインブロックのステータスを維持できます。

以上が私の SVG の Div の下に余分なスペースがあるのはなぜですか? それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。