Interesting difference between Em and Rem use in HTML structure.

You can see what I'm going to talk about here -> https://jsfiddle.net/AndyMP/L7jshu9c/11/

All three div elements inherit the same html parent font-size set at the default 1em.

The first div, sized using em's, is a different width and border-width to the others. After doing some calculations, the width of the div element corresponded to the font-size set within its own style (1.5em = 1.5 * 16 = 24px) multiplied by the div width (10 * 24 = 240). The left and right border widths (.25 * 24 * 2 = 12) add to give the entire div a width of 252.

It didn't just inherit the parent size for the structural elements, although it did for the font size. This surprised me and I hadn't seen this mentioned in any of the content on here. The other two div's, including the second styled using rem's, worked as expected.

Here's the code in case the link disappears.

<div class="box1">Ems</div>
<div class="box2">Rems</div>
<div class="box3">Pxs</div>

and

html {
  font-size: 1em;    /* 16px */
}

.box1 {
  width: 10em;
  border: solid .25em black;
  font-size: 1.5em;
}
.box2 {
  width: 10rem;
  border: solid .25rem black;
  font-size: 1.5rem;
  }
.box3 {
  width: 160px;
  border: solid 4px black;
  font-size: 24px;
}