How does the `a` tag behave? - html

Question

Could you explain how the a tag behaves in this example? Why is it so small?
a {
border: 1px solid currentColor;
}
<li>
<a href="https://facebook.com/starbucks">
<svg aria-hidden="true" class="valign-middle absoluteCenter" focusable="false" preserveAspectRatio="xMidYMid meet">
<path></path>
<circle class="sb-icon-hover" cx="50%" cy="50%" fill="transparent" r="75%"></circle>
</svg>
</a>
</li>
Also, could you explain, how to fix it? And how to center it inside the block? Thank you!

Answer 1

The anchor element (<a>) is by default an inline element. It will have the height of the font (example 1). So, making a border around it will display the height of the font.
If you set the display of the <a> to inline-block or block (example 2 and 3) the element will "contain" the child elements (except if you limit the height...). With either one you can set properties like border, background, padding, margin etc.
svg {
display: inline; /*default*/
height: 2em;
vertical-align: bottom;
}
a {
border: 1px solid currentColor;
}
ul li:nth-child(1) a {
display: inline; /*default*/
}
ul li:nth-child(2) a {
display: inline-block;
}
ul li:nth-child(3) a {
display: block;
}
li {
margin: .1em;
}
<ul>
<li>
<a href="https://facebook.com/starbucks">default
<svg viewBox="0 0 100 100">
<circle cx="50%" cy="50%" fill="red" r="50%"/>
</svg>
</a>
</li>
<li>
<a href="https://facebook.com/starbucks">inline-block
<svg viewBox="0 0 100 100">
<circle cx="50%" cy="50%" fill="red" r="50%"/>
</svg>
</a>
</li>
<li>
<a href="https://facebook.com/starbucks">block
<svg viewBox="0 0 100 100">
<circle cx="50%" cy="50%" fill="red" r="50%"/>
</svg>
</a>
</li>
</ul>