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 The Box Model The CSS Box Model Concept

Posted by Rory Matthews
Rory Matthews
2,287 Points

Element widths... the difference between :100% vs :inherit?

Hi, again I'm sorry if this is a silly question but I was wondering...

Code here: http://cdpn.io/rdKui

Two questions:

  1. If I do not explicitly set the width of an element (such as the 'p' element here), will it yield the same result as specifying 'width: inherit'? i.e. Is 'inherit' the default value for 'width'?
  2. Why, if I enter 'width: 100%', is this not the same as entering 'width: inherit' (the border of the 'p' appears to break out of its parent element)?

Any help really appreciated!

Thanks

1 Answer

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Rory,

All CSS values accept the inherit value, but I've rarely used it. The auto value is the same as if you hadn't set any width value at all.

In your example, the paragraph extends outside its parent, because normally the actual display width of an element is the total of left and right border widths, and left and right padding. So your paragraph's actual display width is 100% + 30 px (left and right borders) + 60 (left and right padding). However, you can overcome this default behavior by using the CSS box-sizing` property. It lets you set make the CSS width include the padding and borders:

box-sizing: border-box;

You can add this to the element whose width you are setting but many people add this to a universal selector so that it applies to all elements on the page:

* { box-sizing: border-box; }

You can learn more about border-box in this video: http://teamtreehouse.com/library/css-foundations/the-box-model/width-height-and-overflow-properties-2 by Guil Hernandez

Rory Matthews
Rory Matthews
2,287 Points

Thanks a lot Dave!

Just to make sure I understand...

If I set 'width: 100%', '100%' is equal to the sum width of the content, padding, border and margin of the parent element.

I was thinking of the 'p' element as the content of the 'margin-edge' div and thought that 'width:100%' would only expand the 'p' element to 100% of the width of the content box of the div.

Setting box-sizing: border-box makes a lot more sense to me if that's the case!

I really appreciate the reply, thanks for your help.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Normally when you set the CSS width property to 100%, just the content area of the element is set to the available space inside the parent element, any left or right borders or padding are added to that when the browser displays the element, so often the element pops outside its container. Setting the box-sizing property to border-box, tells the browser to include the borders and padding as part of the CSS width property.

Rory Matthews
Rory Matthews
2,287 Points

Ah, then I'm glad I made sure. Thanks again.