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 Basics (2014) Basic Layout Basic Layout Review

davide totaro
davide totaro
5,559 Points

How does the browser calculate an element's total width value?

please help me

Thanks Guil Hernandez :).

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi Davide...

When calculating the width of an element the browser takes a number of things into account.

It has to know what the display: property of the element is. The most common values for this property are inline, and block.

With inline elements, are only as wide as the content on the element. With block level elements the element takes up the width of it's containing element. This containing element could be the root (html) element of a div with a width of say 400px,

So in the first instance the display property has a factor.

Then there's the Box Model. Which has width and height properties for the content, the padding, the border and the margin. The total sum of all these values make up the width and height of any element. :-)

Hope this helps you. :-)

Sobin Sebastian
Sobin Sebastian
5,348 Points

the answer is "It adds any left/right padding and border-width values to the width value we define"

by adding both left and right padding and borders width to the width value !