Em and REM are flexible, extensible units that are converted to pixel values by the browser, depending on the font size Settings in your design.

rem

R is short for root, the root element. The root element of the web page.

Rem is a relative unit added to CSS3 (root EM). Font size relative to the root element.

It allows you to adjust all font sizes proportionally by changing only the root element, while avoiding the cascading effect of font sizes being compounded layer by layer.

Rem is associated with the root element. Browsers have a default font size of 16px.

For example, if container2 has a font size of 16px, we can use the same font size as Container1. The default font size for the root HTML element is 16px.

Font-size: 1rem; font-size: 1rem;

You can see that one rem is equal to 16px;

Font-size: 16px “container2” > container1

<div class="container container1">
    <div class="item item1">test</div>
    <div class="item item2">test</div>
    <div class="item item3">test</div>
  </div>
  <div class="container container2">
    <div class="item item1">test</div>
    <div class="item item2">test</div>
    <div class="item item3">test</div>
  </div>

//---css
html {
  color: red;
  font-size: 1rem;
}
.container{
  float: left;
  margin-left: 20px;
}
.container1{
  border-right:1px solid black;
}
.container1 .item1{
  font-size: 1rem;
}
.container1 .item2{
  font-size: 2rem;
}
.container1 .item3{
  font-size: 3rem;
}
.container2 .item1{
  font-size: 16px;
}
.container2 .item2{
  font-size: 32px;
}
.container2 .item3{
  font-size: 48px;
}
Copy the code

The font size of the root element times your REM value.

For example, if the font size of the root element is 16px, 10rem would be 160px, which is 10 x 16 = 160.

em

Em is a unit of relative length. Font size relative to the text in the current object. If the current font size of the inline text is not set manually, it is relative to the parent element, and if the parent element is not set, it is relative to the parent element, up to the browser root element font size. When the browser root element is not set, the default font size is used.

Characteristics of the EM

  • 1. The em value is not fixed;
  • 2. Em inherits the font size of the parent element.

When using EM units, the pixel value will be the EM value multiplied by the font size of the element using EM units.

For example, if a div has an 18px font size, 10em will be the same as 180px, or 10 × 18 = 180.

CSS padding set to 10em, which means CSS padding is 180px;

Note: Because each element automatically inherits its parent element’s font size. Inheritance effects can only be overridden by explicit font units, such as px,vw

The font size of elements using EM units depends on them. But that element may inherit the font size of its parent, which in turn inherits the font size of its parent, and so on. Therefore, the font size of an element in em may be affected by the font size of any of its parent elements.

px

Px Pixel. A unit of relative length. Pixel PX is relative to the screen resolution of the monitor.

Difference between EM and REM:

  • Rem is relative to the HTML root element, while EM is relative to the font size of the parent element.