‘em’ is a font size. It relates to base or parent element font size.
Ex: 1em = font size of the base or parent element.
Note: Browsers default font size is typically 16px.
Example 1: Set font size and line height to the P element(s) using relative unit (em).
<!DOCTYPE html>
<html>
<head>
<title> CSS Relative Unit (em) </title>
<style>
p {
font-size: 2em;
line-height: 1.2em;
border: 1px solid green;
}
</style>
</head>
<body>
<p> First Line</p>
<p> Second Line</p>
</body>
</html>
Result:
In the above example,
Example 2: Set font size DIV element using relative unit (em).
<!DOCTYPE html>
<html>
<head>
<title> CSS Relative Unit (em) </title>
<style>
#parent {
font-size:16px;
}
#child {
font-size:2em;
}
</style>
</head>
<body>
<div id="parent">
DIV element - Parent
<div id="child">
DIV element - Child
</div>
</div>
</body>
</html>
Result:
In the above example,