<div class="container">
<div class="element">
<p>
My line height is set using a unit value 120%. My font size is 18px. The computed value that will be inherited by my child here is 21.6px.
</p>
<div class="child">
I am the child. My font size is bigger than my parent's—it's set to 28px. The line height I inherited from my parent is too small for my text, so my lines overlap. :(
</div>
</div>
<div class="element unitless">
<p>
My line height is set using a unitless value 1.5. My font size is 18px. The computed value that will be inherited by my child here is 27px.
</p>
<div class="child">
I am the child. My font size is bigger than my parent's—it's set to 28px. The line height I inherited from my parent is 1.5 because it's unitless, so my own line height is computed based on my own font size, which is good.
</div>
</div>
</div>
body {
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
hr {
margin-top: 50px;
}
.container {
margin: 40px auto;
max-width: 700px;
}
.element {
padding:20px;
background-color: #009966;
color: white;
margin-bottom: 30px;
font-size: 18px;
line-height: 120%;
}
.child {
font-size: 28px;
}
.element.unitless {
line-height: 1.5;
background-color: purple;
}