em's and rem's

Details
Written by: Stanko Milosev
Category: CSS
Hits: 4844

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