Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Text, Fonts, and Lists List Styles

width in em

Hello,

My paragraphs have a width of 17.5em, but when I check the web console I see that the paragraph has a measurement of 336 X 115

Can you please show me why 17.5 em equals to 336px?

<!DOCTYPE html>
<html>
<head>
    <title>More Text Properties</title>
    <style>
    body{
    padding:1em 6em;
    font:1.2em/1.5 sans-serif;
    background-color: #dfdfdf;
    }
    h1{
    background: #FFF;
    width: 17.5em;
    padding: 1em;
    border: 1px solid #cbcbcb;
    text-shadow: 0 -1px #767676, 0 -2px #262626, 0 0 8px rgb(62, 106, 168);

    }
    p {
    width: 17.5em;

    }



    </style>
</head>
<body>
    <h1>Let's Have Fun With Text Shadows!</h1>
    <p class="text-overflow">
        CSS3 recently introduced a new set of dynamic units for sizing elements! 
    </p>
    <p class="word-wrap">
        Visit link:
        <a href="#">http://www.allaboutfrontenddesign.com/awesome_articles/august/the-longest-title-for-an-article-ever-for-real</a>
    </p>
</body>
</html> 

7 Answers

Your width is 336 px because you have set body font size to 1.2em.

So 1.2 * 16 * 17.5 = 336

I didnt take in to account of the font..

672px = 42.000em so if 1em = 16px then 17.5em = 280px

I some times run in to that issue, I have just always converted my em when it come so width and height....

Try using width: 280px

Ahh, so you are saying that even though 17.5em equals to 280px, the web console may show a differnt number, so to prevent this confusion, I should use pixels on divs, right?

thanks!

I always use PX, there is only a few things I use em's on..

Will the challenge allow you to use PX?

Well, I was just following the video of the class, and I decided to look at the web console just to make sure my understanding of the lenght unit calculations is correct. I didnt expect this huge difference between the web console. and my calculation. Thanks Andrew!

You are very welcome!!

thanks everyone!!

You are welcome!