Menu
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
431
The spec confirms what you thought, that browsers take the largest font for the line-height calculation. That means your only option (and the one the spec mentions) is to set the line height for ALL the inline boxes on lines you care about. You probably would not be happy with the results of selecting body * and setting the font size. So add some Divs with the same class around whatever blocks of text you want to look uniform, and there you go:
div.uniformlines * {
line-height: 100%;
font-size: 16px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
