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

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

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

例:

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

<div>
<p>Firefox または Chrome で表示すると、青い SVG 要素の下に赤いスペースのセクションがあることに気づくでしょう。この余分なスペースは、文字ディセンダ (文字 "y" の末尾など) のために予約されている領域を表します。</p>
<p><strong>解決策:</strong></p>
<p>この余分なスペースを削除するには、次のようにします。 SVG 要素の表示プロパティをブロックに設定する必要があります。これにより、SVG 要素がブロック レベルの要素として動作し、その親コン​​テナの利用可能な幅全体を占めることができます。</p>
<pre class="brush:php;toolbar:false"><div>
<p>この手法を適用すると、SVG 要素の下に余分なスペースが表示されるのを防ぐことができます。 div コンテナの上部と同じ高さになるように配置します。</p>
<p><strong>追加オプション:</strong></p>
<p>SVG 要素をインラインまたはインラインブロックに保持したい場合は、vertical-align プロパティを使用して親コンテナーの上部に揃えることができます。</p>
<pre class="brush:php;toolbar:false"><div> <p>このメソッドは、display: block を設定するのと同じ結果を達成しますが、SVG 要素はインラインまたはインラインブロックのステータスを維持できます。</p>
</div>