What are pros and cons to add line-height to body { }?

Question

Is it good to add line-height in body{line-height:1.5} or it would be better if i add separately for tag by tag like p{ line height:1em} etc.

Edit:

body {line-height:in em} create problem with if we put image with float inside

Edit: 24 April 2010:

If i have to add different line heights to elements

like

p {line-height: 1.4}

h1 {line-height:1.6}

h2 {line-height:1.2}

ul li {line-height:1.1}

then shouldn't i use line height in body {line-height:1.4}

if body {line-height:1.4} and h1 {line-height:1.6} then what would be line height for h1?

Answer 1

It just depends. If you put it in the body then you get to be lazy and not worry about ever doing it again, but your going to lose control because everything on the page will have the line-height set to 1.5. Whereas if you declared it in each tag, you gain lots of control, but will have to do more work.

Personally I would go for the tag-by-tag solution, but I'm a control freak, so...

Answer 2

A word of caution on putting line-height on the body tag:

If you specify a height in percent, you would intuitively expect to enlargen / shrink all line-heights (e.g. 50% shrink to half, 200% duplicate space, 100% nothing happens).

body {
  line-height: 120%
}

This is not the case. For paragraphs and normal-sized text it works fine. But for headings it's a disaster, since the same line-height as for normal text gets applied... See what happens here: https://jsfiddle.net/11jgwzzu/ .

It works, if you use for example 1.5 instead of 150%.

With this in mind, I think it's quite okay to use something like this:

body {
  line-height: 1.61 // Golden Ratio
}

to make the entire page a bit more spacious. You can still overwrite this behaviour for some specific elements if you want to, but I often find I don't even have to overwrite it since I think line-height: 1.61 looks pretty good everywhere.