I want to fit the child element perfectly inside its parent.
The correct height and width for the child seemed to be 14vw. I got this number by subtracting 2vw (the border amount from the parent and child) from 16vw, which is the parent's width and height. Yet when I resize my browser, there is a noticeable gap between the child's bottom border, and the parent. There is also a smaller gap between the right borders.
It seems that viewport width isn't behaving as I expected it to. Any explanation as to why this is the case?
I also noticed that when I inspect the border element in the developer tools, it is always an integer. If viewport width is 1% of the browser width, it seems that this should not be the case.
height: auto; width: auto;
margin: 0 auto;
width: 16vw; height: 16vw;
border: 1vw solid black;
margin: 0 auto;
width: 14vw; height: 14vw;
border: 1vw solid #654321;
Actually, floating point sizes are correct. You can see https://developer.mozilla.org/en-US/docs/Web/CSS/length or https://www.w3.org/TR/2005/WD-css3-values-20050726/. It says:
Values of the CSS data type can be interpolated in order to allow animations. In that case they are interpolated as real, floating-point, numbers. The interpolation happens on the calculated value. The speed of the interpolation is determined by the timing function associated with the animation.
I guess your situation happens because browser can't render for example
0.5px border width so it always has to work with rounded integer border values.
You can actually fix this by letting the internal
.child fill the entire space and including its own border size to its dimensions:
width: 100%; height: 100%; box-sizing: border-box;