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 trialorange sky
Front End Web Development Techdegree Student 4,945 Pointswidth 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
22,107 PointsYour width is 336 px because you have set body font size to 1.2em.
So 1.2 * 16 * 17.5 = 336
Andrew McCombs
4,309 Points672px = 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
Front End Web Development Techdegree Student 4,945 PointsAhh, 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
4,309 PointsI always use PX, there is only a few things I use em's on..
Will the challenge allow you to use PX?
orange sky
Front End Web Development Techdegree Student 4,945 PointsWell, 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
4,309 PointsYou are very welcome!!
orange sky
Front End Web Development Techdegree Student 4,945 Pointsthanks everyone!!
tuukka uosukainen
22,107 PointsYou are welcome!
Andrew McCombs
4,309 PointsAndrew McCombs
4,309 PointsI didnt take in to account of the font..