In web design, there are many situations where svg orimg elements are wrapped with an a tag. However, sometimes unintended gaps or margins may appear at this time. The main reason for this problem is that svg andimg are treated as inline elements.
Since inline elements behave as a box in which text is placed, there may be a tiny space at the bottom of the element. This can appear as a gap, especially when wrapped in an a tag.
A simple solution to this problem is to treat svg andimg as block elements. This can be accomplished by applying display: block;.
svg, img {
display: block;
}
By applying this style, svg andimg, which were originally inline elements, will behave as block elements, and no extra gaps will occur.
Thus, with just a few CSS tweaks, you can effectively solve your site’s design and layout problems.