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) The Box Model Padding

Posted by babasariffodeen
babasariffodeen
6,475 Points

Padding as a percentage of the elements width. Does this mean relative to the content width of the element only?

A little confused about the padding being a percentage of the elements width... Does this mean that its a percentage of the content width i.e without padding/margin/border or is it a percentage of the whole width which includes everything?

Sorry if I didn't explain that properly.

Marius Posogan
Marius Posogan
11,184 Points

Percent of the width of the containing element

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Whether the percentage is calculated using the complete width of the container, or just the content size of the container is determined by the setting of the "border-box" property.

The default is "content-box" which would make calculations based on the content area. But it can be set to "border-box" which would base calculations on the the full width.

babasariffodeen
babasariffodeen
6,475 Points

Thanks Steven, so it's not based on the parent container element as others have mentioned in this discussion? Just so I don't get confused!

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Yes, when I said "container" I also meant "parent". The "parent" and "container" are the same thing.