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 CSS Foundations Selectors Basic Attribute Selectors

Posted by Emmanuel Idiong
Emmanuel Idiong
5,953 Points

css styling

What is the difference between border and padding, and it what instances do you use them?

1 Answer

Marco Slooten
Marco Slooten
7,899 Points
Marco Slooten
Marco Slooten
7,899 Points

Border is actually quite self-explanatory; it's the edge of an element. So you might have a div or a p-tag, you can set the border to 1px solid #eee; to create a 1 pixel thick line in the color #eee (very light grey) around that element.

Padding is the margin inside the element. So looking at the border example, we have a p-tag (paragraph) element with a 1px border around it. In that paragraph is some text. If we don't declare a padding, the text is probably too close to the edge of the element. We would want some white space between the border and the text inside the element. By using padding, you create whitespace around the contents of the element.