Cheap VPS & Xen Server

Residential Proxy Network - Hourly & Monthly Packages

CSS Line Height

The CSS line height property is used to define the minimal height of line boxes within the element. It sets the differences between two lines of your content.

It defines the amount of space above and below inline elements. It allows you to set the height of a line of independently from the font size.

CSS line-height values

There are some property values which are used with CSS line-height property.

value description
normal This is a default value. it specifies a normal line height.
number It specifies a number that is multiplied with the current font size to set the line height.
length It is used to set the line height in px, pt,cm,etc.
% It specifies the line height in percent of the current font.
initial It sets this property to its default value.
inherit It inherits this property from its parent element.

CSS line-height example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. h3.small {
  6.     line-height: 70%;
  7. }
  8. h3.big {
  9.     line-height: 200%;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h3>
  15. This is a heading with a standard line-height.<br>
  16. This is a heading with a standard line-height.<br>
  17. The default line height in most browsers is about 110% to 120%.<br>
  18. </h3>
  19. <h3 class=“small”>
  20. This is a heading with a smaller line-height.<br>
  21. This is a heading with a smaller line-height.<br>
  22. This is a heading with a smaller line-height.<br>
  23. This is a heading with a smaller line-height.<br>
  24. </h3>
  25. <h3 class=“big”>
  26. This is a heading with a bigger line-height.<br>
  27. This is a heading with a bigger line-height.<br>
  28. This is a heading with a bigger line-height.<br>
  29. This is a heading with a bigger line-height.<br>
  30. </h3>
  31. </body>
  32. </html>