EM - Equal to the computed value of the font-size property of the element on which it is used.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">

    <div class="rootSquare"></div>




.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