How to use CSS Line-Height

Quirks of using line-height in CSS

Guowei Lv

2 minute read

There are 4 ways to specify line height in CSS: /* The number way/ line-height: 1.5; / The em way/ line-height: 1.5em; / The percentage way/ line-height: 150%; / The pixel way*/ line-height: 24px; In simple settings, they are pretty much interchangable. For example: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Document</title> <style> p { font-size: 16px; line-height: 1.5; } </style> </head> <body> <p>I'm a paragraph.</p> </body> </html> Here p can use all 4 ways and there would be no difference.