CODEWITHSUNDEEP
htmlcss
juraj
juraj

Reputation: 33

CSS: font statement causes line-height not to work

I can't understand one thing in CSS.

As I understand, line-height is often used as a hack for middle vertical aligning. In one situation it didn't work and only after thorough experimentation I found the cause, which is rather incomprehensible and annoying to me.

So what is the problem?

Look at this example: http://jsfiddle.net/ejRA3/

#outer, #outer-bug {
    height: 35px;
    line-height: 35px;
    border: 1px solid black;
}

#outer-bug {
    font: bold 15px Arial;
}

#outer {
    font-weight: bold;
    font-size: 15px;
    font-family: Arial;
}

Both divs have exactly the same CSS properties, they only differ in one thing. One has font properties in font statement, while second has three font-... statements.

Yet, in the one with font statement, text is magically not in the middle.

So can someone pinpoint the reason to me, why has font this weird effect? Or is it just bug (improbable as it happens in all 3 major browsers: Chrome, Firefox, Opera)?

Thanks for all good explanations or at least attempts of it.

Upvotes: 2

Views: 141

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157284

It is no bug, it's the way you are declaring the short hand syntax is resetting the line-height

#outer-bug {
    font: bold 15px/32px Arial;
               /* ---^--- line-height */
}

Demo

Here's an handy chart to refer

enter image description here

Credits for the chart

The line-height is an optional parameter there... Using Firebug you can make out that your line-height is overridden because #outer-bug block is written after #outer, #outer-bug.

enter image description here

Swapping them will solve the issue as well

Demo (Swapped property blocked declarations)

Upvotes: 4

George
George

Reputation: 36786

When the font style is given, a line-height comes with the font size part of it - if it's not specified it will be normal. You can change what the line height gets set to by adding /n after your font's size:

#outer-bug {
    font: bold 15px/35px Arial;
}

JSFiddle

Upvotes: 4

Related Questions