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 Portfolio

Posted by Vince De Vera
Vince De Vera
Courses Plus Student 1,145 Points

what does the padding mean?

can someone explain what padding means again?

4 Answers

Spike Gralewski
PLUS
Spike Gralewski
Courses Plus Student 8,991 Points
Spike Gralewski
Spike Gralewski
Courses Plus Student 8,991 Points

This helps me to remember the box model and might help you!

If we think about it in relation to the human body, the contents are your organs, the padding is your fat, the border is your skin and the margin is the shirt you are wearing.

So,

  1. Contents = Organs
  2. Padding = Fat
  3. Border = Skin
  4. Margin = Shirt

Hope it helps!

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

isn’t margin the spacing around element? Padding is spacing inside element.

David Omar
David Omar
5,676 Points
David Omar
David Omar
5,676 Points

Ok yea maybe I worded it wrong, maybe its better to say the spacing around the content

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

Perhaps this clarifies the meaning of padding?

http://www.w3schools.com/css/css_boxmodel.asp

Hope this helps!

Kevin Murphy
Kevin Murphy
24,380 Points
Kevin Murphy
Kevin Murphy
24,380 Points

The difference between padding and margin I think can get particularly confusing in relation to context. Sometimes it seems margin needs tweaking, other times padding, to adjust an element. What I didn't initially realize is that you need to keep in mind the container/s of the element you are adjusting margin or padding on.

What made a huge difference for me was regularly using Firebug (or Chrome Dev tools) on an absolutely regular basis to examine margin and padding (and play with the values as the dev tool will make the adjustment in real time) . Also, adding a rule that adds say a blue border around your elements. This way you can see the dimensions of the element and what adjustments to the padding and margin have on the targeted and surrounding elements. You would just define a class for this rule in your markup for any elements you want to see more clearly. You can then comment it out when you don't want to see the borders.