The difference is: the browser according to a value px who conversion.
When rem units, converted to pixels of the root element depends on the size of the font, font size, i.e. HTML element.
There is a relatively common misconception that the em unit is relative to the parent element's font size. In fact, according to W3C standards,
They are relative to the font em units using the element of size.
The font size of the parent element can affect the value of em, but this occurs solely because of inheritance .
Em inherited effect units:
There is inherited when em units, each element will automatically inherit the font size of the parent element, inherited effects can only be covered with a clear font units, such px and vw .
As long as there have been parent element font-size is above the em unit, it will have been inherited , but if set up their own font-size units of px when it will directly use the value of their px units .
em inheritance example:
If we root element font size is 16px (usually the default), a sub-element div inside padding is 1.5em, the div element inherited from the parent 16px. Thus padding will translate into 24px, i.e., 1.5 x 16 = 24px.
Figure words. padding: 24
If we add an extra div2 to wrap the original div, then set the font size 1.25em it?
Our div2 inherit the root element of the font size 16px, font size and multiplied his 1.25rem of. This will set the font size div2 1.25 x 16 = 20px
! ! ! Now that our initial div, no longer inherit the 16px directly from the root element, but it's wrapped with inherit div2 inherit the font size that is 20px.
So we padding inside the div now becomes 1.5 x 20 = 30px
The padding: 30 that way
Then we come to look at,
只有父级元素的font-size 一直以em作为单位，则子元素会一直继承。但假如！！！自己！！！设置的font-size的单位为px的时候，则会直接使用自己的px单位的值。
我这里的div1仍然是自己的20px
