CODEWITHSUNDEEP
css
joshnh
joshnh

Reputation: 8734

Monospaced font throwing line-height out

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.

Upvotes: 5

Views: 1454

Answers (2)

MatTheCat
MatTheCat

Reputation: 18761

I found here a working solution which is to set the font-size again and set the font-family to monospace, monospace.

Upvotes: 0

noob
noob

Reputation: 9212

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/

Upvotes: 1

Related Questions