My code is as follows:
body { background-color: black; }
.root { background-color: aqua; }
.svg-container { background-color: lightgray; }
svg { background-color: red; }
.btn { background-color: yellow; }
.svg-container, .btn {
display: inline-block;
}
svg {
height: 60px;
width: 60px;
}
svg, .svg-container, .btn {
margin: 0;
padding: 0;
border: 0;
}<html>
<head></head>
<body>
<div class="root">
<div class="svg-container">
<svg></svg>
</div>
<button class="btn">Button</button>
</div>
</body>
</html>I anticipated that the height of .svg-container would be exactly equal to the containing svg, which is 60px. Additionally, I expected the .btn to be positioned at the top rather than the bottom. Another issue I noticed with the .btn is that there is excessive space above it, despite there being a gap between the .btn and the containing .div.
What could be causing this behavior?