0

I'm trying to make two divs equal. One has its own size in rem, and the other should be equal to the first, but it has a border (its width is also in rem). Thus, I decided to calculate its size as the size of the first minus the total thickness of the borders. Nevertheless, they remain different sizes, differing in shares of pixel. When I use px (in my case it is undesirable), such a problem doesn't happen.

<body>
  <div style="height: 10.16rem; width: 10.16rem; background-color: aqua;"></div>
  <div style="height: 10rem; width: 10rem; border: 0.08rem solid aqua; background-color: blue;"></div>
</body>

It seems that the thickness of the border in rem obeys some other laws, but I have not found an answer to this anywhere. In theory, in both cases, divs should be equal, since rem is counted from the font size in html.

Hassen Ch.
  • 1,693
  • 18
  • 31
Michael
  • 3
  • 2
  • Does using your browser's Inspector show you anything different between the two divs? One obvious possibility is that there's a rounding error, given that your border is in hundredths of a rem. Also, because the border is *outside* the element, your browser may be scaling the divs differently to compensate, if you have any other code in your actual page (or is the minimal code above what you're actually using in practice?). – JohnP Aug 18 '21 at 12:05

1 Answers1

0

Set box sizing to border-box to avoid this problem to begin with.

Then both your divs will follow the specified dimensions without getting affected by border, padding, etc.

* {
   box-sizing: border-box;
}
<body>
    <div style="height: 10rem; width: 10rem; background-color: aqua;"></div>
    <div style="height: 10rem; width: 10rem; border: 0.08rem solid aqua; background-color: red;"></div>
</body>
Rod911
  • 752
  • 5
  • 14