My basic CSS rule for font-size and line-height is pretty simple:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 24px;
}
When I create a paragraph that contains an <em> or a <strong> (or even some <code> which uses a different font-size than the <body>), I notice that these elements increase the line-height by a pixel or two.
This leads me to believe that most browsers take the largest inline element to display line-height. Is that right?
My goal is to make the line-height consistent, regardless of which elements are inline.
The only way I've found to make the line-height consistent is to define:
em, strong, code, etc {
line-height: 100%;
}
Is this the right way to go about this? Or am I being too much of a perfectionist?
Edit 1:
This also seems to work:
em, strong, code, etc {
line-height: 1;
}
Edit 2:
After playing with this for a few days, it doesn't appear that there is a reliable solution for keeping a consistent line-height. If anyone has any ideas, I'd certainly love to hear them.
Edit 3:
For my own future reference and from my own research, these tags should be considered with line-height: 1 as long as they are displayed inline along with other standard body text:
abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q,
samp, small, strong, sub, sup, tt, var
These elements are questionable:
a, bdo, img, span