The effect of default "line-height" is the same over all browsers?

Question

Code:

<div style="font-size:12px">abc</div>

On my chrome browser, the height of this div is 14px, which means the actual value of line-height of the div is 14px. How about on other browsers? Does W3C standard address this?

The default line height is `normal` which depends on browser, browser settings and font. — Jarlik Stepsto, Mar 01 '21 at 11:09
line-height is only one factor the define the height, you need to also consider alingment so height!=line-height — Temani Afif, Mar 01 '21 at 11:14
line-height is depends upon fonts you are using, its better to specify the line-height to get expected result in different browsers. — nano dev, Mar 01 '21 at 11:23

score 0 · Answer 1 · answered Mar 01 '21 at 11:06

The line-height for div elements defaults to a user agent value of normal. According to MDN, the interpretation of normal is user-agent dependent.

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#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.

score 0 · Answer 2 · answered Mar 01 '21 at 11:06

Your example is 14.4px height on firefox. On Safari it's 14px.
https://www.w3schools.com/cssref/pr_dim_line-height.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
line-height: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.

Also usefull: http://smad.jmu.edu/shen/webtype/lineheight.html

score -1 · Answer 3 · answered Mar 01 '21 at 11:09

-1

I found one blog related to line-height with other height references in HTML/CSS. LINE-HEIGHT

Hope this will help you to understand the concepts of line-height.

answered Mar 01 '21 at 11:09

Jonty Tejani

11
4

The effect of default "line-height" is the same over all browsers?

3 Answers3