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 Mike Hodgson
Mike Hodgson
811 Points

Padding?

could someone please clarify padding for me please in css.

Link attached http://imgur.com/sp4tJHT

Reggie Sibley
Reggie Sibley
6,018 Points

Hi Mike Hodgson!

Great Question! I can explain it easier if i use an analogy. So Mike, think of everything on your page as a 'Box'. And within this box contains your content. Now your content may be to big for the box, and can take up the whole entire box! But that wont work, because you wanted to have some space in the box, and give it some room. So that content needs some padding on its sides, so it can have room. So in simple terms, padding is the amount of room around the content within a parent element (it creates space within the element). Margin on the other hand creates space OUTSIDE of the element. (outside of the box)

Hopefully this helps you out! You can find more information at http://www.w3schools.com/css/css_boxmodel.asp.

2 Answers

Karen Freeman-Smith
Karen Freeman-Smith
29,248 Points
Karen Freeman-Smith
Karen Freeman-Smith
29,248 Points

I think of it as a picture with a frame... the picture is your content, the frame is the border. Sometimes it looks nicer to add a mat between the picture and the frame. Padding works the same way on a web page. (And margin is like where you place it on the wall - how close to the other pictures).

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

First, gratz on getting your picture shared here! :thumbsup:

Let's say that the image you have is your element. The distance between the image and the border is the padding. The distance between the border and the next element in the page is the margin. While I'm not a big fan of this site, this is a pretty good depiction. Check out this visual representation:

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