CSS line-height – set minimum height of line box

On block level elements, the line-height property specifies the minimum height of line boxes within the element.

CSS property line-height

CSS version: CSS 2.1
Value: normal | number | length | percentage
Initial: normal
Applies to: all elements
Inherited: yes

line-height values

Value typeInterpretationInheritance
normal (default)roughly 1.2 depending upon font-family-
number (preferred)number * font-sizeValue is inherited before computation
length (avoid)1.2em, etc.Value is inherited after computation. Can lead to unexpected results
length (avoid)percentage * font-sizeValue is inherited after computation. Can lead to unexpected results

Comment on inheritance

In case font value is in number, the value is inherited as it is and computation applies on child element font-size. For value in length or percentage, it is computed and then inherited. In case child font being very large, this can lead to a situation line-height being less than font.

line-height number value example with inheritance

This is the preferred option and inheritance does not cause unexpected results.

<style type="text/css">
.outer {
  width: 100px;
  font-size: 14px;
  line-height: 1.2;
}
h1 {font-size: 30px;}
</style>
<div class="outer">
<h1>This is in h1</h1>
Hello world - just normal text
</div>
refresh

line-height length (em) value example with inheritance

When using line-height length (em) value, inheritance can cause expected results.

<style type="text/css">
.outer {
  width: 100px;
  font-size: 14px;
  line-height: 1.2em;
}
h1 {font-size: 30px;}
</style>
<div class="outer">
<h1>This is in h1</h1>
Hello world - just normal text
</div>
refresh

line-height percentage value example with inheritance

When using line-height percentage value, inheritance can cause expected results.

<style type="text/css">
.outer {
  width: 100px;
  font-size: 14px;
  line-height: 120%;
}
h1 {font-size: 30px;}
</style>
<div class="outer">
<h1>This is in h1</h1>
Hello world - just normal text
</div>
refresh

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments