Home/ Questions/Q 755159
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T15:05:51+00:00

what is default line-height of browsers like font-size is 16px ? for which HTML

  • 0

what is default line-height of browsers like font-size is 16px?

for which HTML elements i should define line-height and for which not?

What is the reason behind to give line-height to body { } ?

Will line-height effect to single line text?

If I’m using font in em then should i also use use line-height in em?

What is co-relation between line-height and font-size?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In my experience, a common default line-height seems to be close to 1.2 (that would be ~19px leading for a 16px font (16*1.2)). In some browsers versions it’s about 1.1 – but I can’t remember ever seeing it outside that scope.

    The line-height property is inherited from parent to child – so specifying a line-height on <body> will affect all elements on the page, except the ones that have their own line-height property set, and their descendants. (See example below)

    Line height affects the height occupied by each character – so yes it also has an effect on single-line-of-text elements.

    Line-height comes in three basic flavours:

    1. ‘relative’/’unitless’ (e.g. 1.2)
    2. ‘fixed’ (e.g. 14px)
    3. ‘fixed-relative’ (e.g. 1.2em)

    Relative (unitless) values will apply proportionally equivalent line-height to all elements depending on their font-size.
    Meanwhile, fixed values (px) don’t change with the font-size.

    For explanation of the ‘fixed-relative’ variant (the ’em’-values) refer to Eric Meyer’s blog post “Unitless Line-Heights“.

    Each flavour has it’s place in the world. 🙂

    Here’s a short example of all three:

    body {
  font-size: 12px;
  line-height: 1.5;
}
small {
  font-size: 10px;
}
div {
  line-height: 21px;
}
p {
  line-height: 2em;
}

...

<body>
  one
  <small>two</small>
  <div>
    three
    <small>four</small>
  </div>
  <p>
    five
    <small>six</small>
  </p>
</body>

    Each word in the example above would have the following line-heights (translated into px)

    • ‘one’ == 18px (1.5 times the 12px font-size of body)
    • ‘two’ == 15px (1.5 times the 10px font-size of small)
    • ‘three’ == 21px (fixed px value)
    • ‘four’ == 21px (inherits a fixed px value from div)
    • ‘five’ == 24px (2 times the 12px font-size of p (inherited from body))
    • ‘six’ == 24px (inherits a (fixed) pre-calculated value from p)
    • 0