CODEWITHSUNDEEP
cssfont-size
matt
matt

Reputation: 44293

CSS: Calculating in ems: font-size inside font-size?

My current project is entirely based on ems.

html

<div class="tiny">
    This is some tiny text which is tiny.
</div>

<div class="small">
    This is some small text which is small.
    <div class="tiny">
        And this is some tiny text inside small text which should be as tiny as the other tiny one.
    </div>
</div>

css

.tiny {
    font-size:0.7em;
    line-height:1.7;   
}

.small {
    font-size:0.8em;
    line-height:1.3em;  
}

In this case the tiny text inside the small text is smaller than the normal tiny text.

First off, why is that? Secondly, how can I fix this or make it the same size?

http://jsfiddle.net/DFKtF/

Thank you in advance!

Upvotes: 1

Views: 732

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201548

The em unit mostly denotes the font size of the element itself, but in the value of font-size (where that would make no sense), it denotes the font size of the parent element. So in your example, the quantity 0.7em means 0.7 times the font size of the enclosing element, which already has a reduced font size.

To deal with this, simply select the number accordingly. If you want tiny text that is 0.7 times the copy text font size, and the enclosing element has font size of 0.8 times the copy text size, you’ll need the number 0.7/0.8, i.e. .small should have font-size:0.875em.

Upvotes: 3

Miljan Puzović
Miljan Puzović

Reputation: 5820

Don't use em, use px. Or carefully calculate. When used to specify font sizes, the em unit refers to the font size of the parent element.

Upvotes: 0

Kwon
Kwon

Reputation: 390

.em's are relative measurements, not absolute.

Upvotes: 0

Related Questions