[Edit]

CSS - set text line height

1 contributors

2 contributions

0 discussions

0 points

Created by:

Violetd

925

In this article, we would like to show you how to

Quick solution:

xxxxxxxxxx
 
.my-element {
    line-height: 20px;
}

Note:

The line-height property can be set to:

keyword value (e.g. line-height: normal),
unitless value (e.g. line-height: 2.5),
length value (e.g. line-height: 3em),
percentage value (e.g. line-height: 35%),
global value (e.g. line-height: inherit).

Practical example

Edit

In this section, we present some div elements with example line-height values.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    div {
        border: 1px solid lightgray;
        padding: 0 5px;
    }
    
    .text-1 {
        line-height: 1.2;  /* usually a default value */
    }
    
    .text-2 {
        line-height: 3em;
    }
    
    .text-3 {
        line-height: 100px;
    }
​
  </style>
</head>
<body>
  <div class="text-1">This element line height is 1.2 (normal)</div>
  <div class="text-2">This element line height is 3em</div>
  <div class="text-3">This element line height is 100px</div>
</body>
</html>

Auto running

Note:

line-height: 1.2 in most cases is the default value, equivalent to line-height: normal. However, this depends on the user agent and element's font-family.