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

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

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

tuukka uosukainen
tuukka uosukainen
22,107 Points

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

So 1.2 * 16 * 17.5 = 336

Andrew McCombs
Andrew McCombs
4,309 Points

I didnt take in to account of the font..

Andrew McCombs
Andrew McCombs
4,309 Points
Andrew McCombs
Andrew McCombs
4,309 Points

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

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

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!

Andrew McCombs
Andrew McCombs
4,309 Points

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

Will the challenge allow you to use PX?

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

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!

Andrew McCombs
Andrew McCombs
4,309 Points
Andrew McCombs
Andrew McCombs
4,309 Points

You are very welcome!!

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

thanks everyone!!

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

You are welcome!