Currently, I have a setup that includes:
- A div with width set to 100% and height set to 100%
- An SVG element inside the div with default width and height of 100%
My issue is that when applying padding to the div, the left, right, and top padding seem to work fine, but the bottom padding doesn't have any effect. Any thoughts on what might be causing this?
To see the code in action, you can check out this CodePen link.
<div>
<svg viewBox="0 0 100 100"></svg>
</div>
div {
box-sizing: border-box;
background-color: tomato;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5px;
}
svg{
background-color: lightblue;
}