Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) The Box Model Padding

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.

Percent of the width of the containing element

1 Answer

Steven Parker
Steven Parker
217,626 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.

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
217,626 Points

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