CODEWITHSUNDEEP
csspaddingfont-sizeems
Ahmad Malik
Ahmad Malik

Reputation: 41

please explain how line-height is implemented here.... ? css3

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>

Upvotes: 0

Views: 44

Answers (1)

Ahmad Malik
Ahmad Malik

Reputation: 41

I figured it out myself. problem is here

.card header h2{
  font-size:2em;
  line-height: 1.5em;
}

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.

Upvotes: 1

Related Questions