line-height

line-height

On block level elements, the line-height property specifies the minimum height of line boxes within the element. On non-replaced inline elements, line-height specifies the height that is used to calculate line box height.

/* Keyword values */
line-height: normal;

/* Unitless: use this number multiplied by
the element's font size */ 
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;
Initial value normal
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited yes
Percentages refer to the font size of the element itself
Media visual
Computed value for percentage and length values, the absolute length, otherwise as specified
Animation type a number, a length
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

The line-height property is specified as any one of the following:

Values

normal
Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.
<number>
The used value is this unitless <number> multiplied by the element's font size- The computed value is the same as the specified <number>- In most cases this is the preferred way to set line-height with no unexpected results in case of inheritance-
<length>
The specified <length> is used in the calculation of the line box height. See <length> values for possible units.
<percentage>
Relative to the font size of the element itself. The computed value is this percentage multiplied by the element's computed font size.
Percentage and em values may have unexpected results, see "Notes" section.

Formal syntax

normal | <number> | <length> | <percentage>

Examples

/* All rules below have the same resultant line height */

div { line-height: 1.2;   font-size: 10pt }   /* number */ 
div { line-height: 1.2em; font-size: 10pt }   /* length */ 
div { line-height: 120%;  font-size: 10pt }   /* percentage */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif } /* see Notes */

Notes

  • It is often more convenient to set line-height by using the font shortcut as stated in the "Examples" section above, but this requires the mandatory font-family property.

Prefer unitless numbers for line-height values

This example shows why it is better to prefer <number> values for line-height instead of a <length>.

We will use two <div> elements. The first, with the green border, will use a unitless line-height value. The second, with the red border, has a length line-height value.

.green {
  line-height: 1.1;
  border: solid limegreen;
}
.red {
  line-height: 1.1em;
  border: solid red;
}
h1 {
  font-size: 30px;
}
.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}

The HTML, with our two boxes:

<div class="box green">
 <h1>Avoid unexpected results by using unitless line-height</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<div class="box red">
 <h1>Avoid unexpected results by using unitless line-height</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px  --> 
<!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want -->

Result:

Specifications

Specification Status Comment
CSS Transitions
The definition of 'line-height' in that specification.
Working Draft Defines line-height as animatable.
CSS Level 2 (Revision 1)
The definition of 'line-height' in that specification.
Recommendation No change
CSS Level 1
The definition of 'line-height' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0[1] (Yes) 1.0 (1.7 or earlier) 4.0[1] 7.0 1.0[1]
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0[1] (Yes) 1.0 (1) 6.0[1] 6.0 1.0[1]

See also

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部