Menu
What is the most efficient way to make all nested list items the same size while using an em that is not equal to 1. For example, I want all li's in this list to be sized to 0.85em of the ul's parent. Do I have to create a separate class for each "level" of depth?
<html>
<head>
<style type="text/css">
li
{
font-size: 0.85em;
}
</style>
</head>
<body>
<ul>
<li>Level 1 item
<ul>
<li>Level 2 item
<ul>
<li>Level 3 item</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
288
An em is a unit of measurement, relative to the size of the font; therefore, in a typeface set at a font-size of 16px, one em is 16px. The em square is the “box” that each glyph is sized relative to. So, at 12 points, the em square is 12 points wide.
The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion.
2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses ... The font-size is set at 1em and the line-height is set to 1.125.
If the font-size you want is 12px , then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px , then specify 0.625em (10/16 = 0.625); for 22px , specify 1.375em (22/16).
Use the "rem" unit for font sizing. This fixes the font-inheritance problem.
Johnathan Snook has a great article on this.
124
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
