Inline relative Text sizing vs using Styles...

Posted on 2006-04-17
Last Modified: 2010-04-09

I have noticed something odd trying to do some relative sizing of text.

If I say:

font-size:57% in the CSS Style Sheet Section, I get text about 7 pts.

however, if I say:

font-size:57% as an inline Span attribute, I get really tiny text (like 2 pts).

Why the difference?

Question by:MitchellVII
    1 Comment
    LVL 7

    Accepted Solution

    That's the "cascading" part of CSS.  How relative sizing works is that the size is relative to the size specified for all containing elements.  For example, suppose you had 16px defined for the body tag, 75% defined for p tags, and 50% defined for small tags.  Using the following markup fragment:

      I'm rendered at 16px.
      <p>I'm rendered at 75% of my containing element (16px) or 12px.  And, when you encounter <small>you should see me rendered at 50% of my containing element (12px) or 6px.</small>

    This is probably the single biggest reason to be very careful about defining relative sizes on elements that will be nested.

    Does that make sense?

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now