Adjust Line Height using line-height [14/16]

You can control the line height or, to be more precise, line spacing, using the line-height property. The value of this property can be set in several different ways:

  1. As a multiplier to the element's font size, such as 1.5 or 2.
  2. As a percentage, e.g. 150%.
  3. In any other CSS units: 12px, 2em.
  4. Using the normal keyword enabling automatic calculation of the line height.

We recommend to set the line spacing using multipliers or relative units.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Adjust Line Height using line-height:</title> </head> <body> <h1>Responsive + Mobile First</h1> <p class="low"><span>The correspondence between Responsive Design and Mobile First is much similar to Graceful Degradation vs. Progressive Enhancement. The first approach is more generic, while the second one is more specific as it adds more requirements to the first one: "Start with simple HTML", "Mobile first", "Pat the cat," etc.</span></p> <p class="high"><span>It is worth noting that the approaches mentioned are combinable and perfectly complement each other. In the near future, all the top developers will announce: "We do Mobile First + Progressive Enhancement".</span></p> </body> </html>
h1 { font-size: 24px; } span { background: rgba(210, 210, 210, 0.3); } .low { } .high { }
HTML Academy

Change line spacing for different paragraphs:

  1. For the paragraph with the .low class, set the line spacing of 10px.
  2. For the paragraph with the .high class, set the line spacing of 1.5.
Theory Check Next