Webデザインにおいて、svgやimg要素をaタグでラップする場面は多くあります。しかし、この時に時折、意図しない隙間や余白が表示されることがあります。この問題の主な原因は、svgやimgがインライン要素として扱われるためです。
インライン要素は、文字を配置するボックスとして振る舞うため、その下部に微小なスペースが存在することがあります。これが、特にaタグでラップした場合に、隙間として見えることがあるのです。
この問題を解消するための簡単な方法は、svgやimgをブロック要素として扱うことです。これはdisplay: block;を適用することで実現できます。
svg, img {
display: block;
}
このスタイルを適用することで、元々のインライン要素であったsvgやimgがブロック要素として振る舞い、余計な隙間が発生しなくなります。
このように、少しのCSSの調整だけで、サイトのデザインやレイアウトの問題を効果的に解決することができます。