Menu
I have two <span>s. First is font-size: 14px; and I want to reduce font-size of child <span> for 2 px;
<span>14px font <span>12px span</span></span>
How to do this without obvious setting font-size: 12px;? Is it possible with CSS? Or should I use jQuery?
jsFiddle, of course.
680
The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above. A positive <length> value.
In this case, the font size of <p> elements will be double the computed font-size inherited by <p> elements. By extension, a font-size of 1em equals the computed font-size of the element on which it is used. If a font-size has not been set on any of the <p> 's ancestors, then 1em will equal the default browser font-size, which is usually 16px.
Note: Defining font sizes in px is not accessible, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.
Similarly, if you want a font size of 10px, then specify 0.625em(10/16 = 0.625); for 22px, specify 1.375em(22/16). The emis a very useful unit in CSS since it automatically adapts its length relative to the font that the reader chooses to use. One important fact to keep in mind: em values compound.
If you don't mind using a feature with less than full support, I believe you could use CSS3's calc() For example:
font-size: calc(100% - 2px);
According to the spec the spaces around the operator are necessary. calc(100%-2px) may not work.
Unfortunately, this doesn't work on a lot of older browsers including IE8 and iOS Safari < 6. If you want to support them, a javascript solution like Quentin or Zeaklous came up with is your best bet.
References:
100
CSS has no features which allow the setting of a value plus or minus a number of length units. @Yumecosmos points out that modern browsers support calc.
You could use relative units: font-size: 85%, but that wouldn't be 2px except when the parent font size was 14px (and even then it is approximate).
If you want to read the current value and then subtract 2px from it then you can break out the JavaScript.
42
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
