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

Posted by Ryan Decker
Ryan Decker
3,451 Points

Clarification of Margin & Padding!

I copied the code below from W3: ,,,

width:250px; padding:10px; border:5px solid gray; margin:10px;

Let's do the math: 250px (width)

  • 20px (left + right padding)
  • 10px (left + right border)
  • 20px (left + right margin) = 300px ,,,

I thought that when something like padding: 10px was applied that meant that 10px was added to ALL sides, not just the left and right border. What am I missing???

2 Answers

Derek Etnyre
Derek Etnyre
20,822 Points

You are correct padding: 10px; adds the padding to all of the sides. This web page has nice diagram: http://www.w3.org/TR/CSS2/box.html

Ryan Decker
Ryan Decker
3,451 Points

Derek,

Thanks for the clarification. I have seen that diagram before. Thats why I was wondering why W3 only listed the padding on the left and right. Is their information incorrect? Am I missing something else?

Derek Etnyre
Derek Etnyre
20,822 Points
Derek Etnyre
Derek Etnyre
20,822 Points

Think they left the top and bottom out because they were just talking about the width that is being taken up by the margin, border, padding and content.

Ryan Decker
Ryan Decker
3,451 Points

DUHHHH :) Thanks for the help there :)

Ryan Decker
Ryan Decker
3,451 Points

DUHHHH :) Thanks for the help there :)