How to make font-size less for 2px than parent element?


Tags: html,css,css3,fonts

Problem :

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.



Solution :

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:


    CSS Howto..

    jqueryUI custom button not showing up

    How to make jQuery css affect upcoming elements

    How to darken a CSS background image?

    how to center anchor tag horizontally css

    How can I make images fit into a 200 pixel square box using CSS?

    how to repeat a small background image througout the page?

    How to make dropdown list unselectable?

    How insert value from Ruby in CSS file

    How to find which CSS files are used for current page

    2 divs aligned side by side, how to make right div fill width 100%?

    Yet another person asking how to center a navigation bar

    How to create a progress bar animation

    How to make a div grow with its children when inline-blocks don't fit anymore

    How to horizontally center text in bootstrap button?

    How do I add background color to just the width of centred text?

    How to define a Click handler function for multiple elements at the same time

    how to set css position absolute in hover state

    How do I design my CSS with ASP.NET MVC?

    how to center a div without width?

    How to create a perfect 3 columns layout using CSS , with cross-browser support?

    How do I make text text when you hover the mouse over it?

    How do I change the text inside a button?

    How to link a css file with the Slim templating engine?

    How to style button inputs to be identical in Chrome and Firefox?

    How can I put an input element on the same line as its label?

    CSS: How to get position and size relative to screen width?

    How can I make one item with its own class a different colour from others?

    How to find out and get rid of unused CSS code? [closed]

    With Wordpress, how do I link to an image to use as a background in my style.css file?

    Bootstrap with Picture Slideshow