EM - Equal to the computed value of the font-size property of the element on which it is used.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="rootSquare"></div> </body> </html>
CSS:
.rootSquare { border: 1px solid #333; height: 1em; }Live example:
Notice in this my live example that "rootSquare" div is 14px - that is because parent element's font size is 14 pixels, so that means 1em = parent element font size, if font-size is not defined then default font size is taken
REM - same as the EM the only difference is that it will take font size of the root element which is usually HTML