Question

Let’s say I have the following:

<p>This is a paragraph containing some <code>code</code>.</p>

with the following styling:

p {
    font: 16px/24px sans-serif;
}
code {
    font: 16px/24px monospace, sans-serif;
}

Why does the code element throw out my line-height? Here is a jsFiddle that illustrates the issue: http://jsfiddle.net/sl1dr/chgyb/

EDIT: Upon further investigation I have discovered the the fiddle I linked to works fine on a Mac, but not on Windows. This is getting more and more intriguing as the site I am working on is having the issue on both Mac and Windows.

Answer 1

It is not a line-height change, it is because mostly different font-family‘s have a different margin around the font. But font-margin is not something what you can change with css. So you’re right, you need to change the line-height: http://jsfiddle.net/chgyb/2/