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 How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Paul Barron
Paul Barron
6,595 Points
Posted by Paul Barron
Paul Barron
6,595 Points

Padding

If I were to put padding like so padding: 50%; how come it doesn't go all the way around. For instance instead of it being centered it's pushed to one corner. I still am lost when it comes to padding.

1 Answer

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

Padding is the space from the edge of the content (like text inside of a div) and the border. Margin is the space outside the border -- between the border and other elements.

If you set the padding to 50% -- padding: 50% -- you're basically asking a browser to add space equal to 50% the width of the element ALL around the element. In other words, that's 50% the width of the element on the left and 50% on the right, and 50% above and 50% below. You'll end up with some strange behavior because that doesn't leave any room for the actual content (50% + 50% = 100%)

There's another weird thing about padding when using percentage values -- the percentage is calculated based on the WIDTH of the element. That includes the top and bottom padding as well! So the top padding will be a percentage of the element's WIDTH, not its height.