Menu
How do you override the font-size property when you have nested elements? Using !important doesn't seem to have any effect.
div {
font-size:6em;
}
p {
font-size:1em !important;
}
span {
font-size:1em;
}
-
<html>
<body>
<div><span>span</span><p>paragraph</p></div>
</body>
</html>
http://jsfiddle.net/dvUTQ/
630
Em's are relative sizes to their parent elements.
http://jsfiddle.net/dvUTQ/3/
div#small {
font-size:2em;
}
div#big {
font-size:6em;
}
p {
font-size:.5em; /* effective sizes: big: 3em, small: 1em */
}
span {
font-size:2em; /* effective sizes: big: 12em, small: 4em */
}
Setting a child element to 1em just makes it the same size as its parent. .5em on p in this case would effectively make it 3em.
http://www.w3schools.com/cssref/css_units.asp
58
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
