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?
Typically, the default line height is about 1.1em (which is relative to the font size being used by the element.
You should set a default line-height in your CSS, and then only modify the line-height in your page when it needs to differ from this.
When you have a requirement that text in the tag have a specified line-height
Don't understand this question
Only if you need to.
If you are using em's to specify line height, the height will be proportional relative to the font size.
Line-height is, quite simply, the height of a line of text, but it also applies to elements whose display style is inline.
It is equivalent to leading in print typography. Typically, you want a little space between lines of text, and often you will see sites applying an overall line-height of 1.4 or 1.2. A value of 1.4 means they want the line height to be 140% of the text height. If the line-height is set to (or left at) 1, then weird things can happen. When you see an italic word displacing an entire line (making it look uneven) that's what's happened.
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.2)14px)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)
font-size of body)font-size of small)px value)px value from div)font-size of p (inherited from body))p)