css basic em and rem

 

  Both em and rem are relative units and are converted to px by the browser

 

  rem is the font size that depends on the root element of the page, i.e. html

 

 

html {
   font-size: 16px;
   padding: 10rem;  // 10 * 16 = 160px
}

 

  em is the element font size multiplied by the em value in em units.

 

   

.test {
   font-size: 18px;
   padding: 10em;  // 10 * 18
}