what I want to ask is "shouldn't be line-height have a value of 3em in h2. how it is actually working. when I set set font-size:2em and line-height:3em it is not in center vertically. How can be a line-height:1.5 is keeping the text in center of header?"
html{
font-size:10px;
}
h2{
margin:0;
}
.card{
width: 35em;
height: 22em;
margin: 05em auto;
background-color: red;
}
.card header{
height: 3em;
padding: 1em;
background: orange;
}
.card header h2{
font-size:2em;
line-height: 1.5em;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section class="card">
<header>
<h2>This is Header</h2>
</header>
</section>
</body>
</html>
I figured it out myself. problem is here
basefont size is set to 10px. so when i set font-size:2em it means font-size has value "20px" so when line-height is set to 1.5em it is taking the current font-size value which is 20px (2em) so now line-height:1.5em means 1.5 of 20px which is 30px.
in short: em refers to local font-size value first then to parent and last to global.