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

Cameron Prouse
Cameron Prouse
2,120 Points
Posted by Cameron Prouse
Cameron Prouse
2,120 Points

padding vs. margin

Hey guys!

I'm having trouble understanding the difference between padding vs. margin. I've searched it online and found answers, but because I'm new at this, I don't really follow what they are saying.

I know padding is inside an element and margin is outside an element. What's an element though?

3 Answers

Balazs Peak
Balazs Peak
46,160 Points
Balazs Peak
Balazs Peak
46,160 Points

When you use the HTML markup, you define elements. For example, when you use the "div" tag, you create a div element.

<div>Something</div>

Now the really cool thing about HTML and CSS is that the appearance of these elements is completely configurable, in many different ways. (Not only things like colors and fonts, but spacings and all that.)

All of your elements have borders, that's quite straight forward.

But you might want to add spacing between the border and the inner content of the element. (Inner content could be text or another elements, for example.) You can do this with using paddings.

You might also want to add spacing outside of the border, between the element and it's sibling - that would be the margin.

These are very basic concepts, don't think too much about it. It will be 100% obvious after a couple of days of practice.

Cameron Prouse
Cameron Prouse
2,120 Points
Cameron Prouse
Cameron Prouse
2,120 Points

Hey Balazs!

Thanks a bunch for the response.

Only follow up I have: you say, every element has borders. What do you mean by that? An <h2>, for example, has borders? (I don't understand).

Thanks!

Balazs Peak
Balazs Peak
46,160 Points
Balazs Peak
Balazs Peak
46,160 Points

Of course, if you want to see it's border, just add some color and width to it. There is a border-style property as well, which determines the pattern of the border. For simple line, you should use the solid value.

For the sake of example, you can try this with in-line styling, instead of a separate CSS file. (In-line styling is rarely used in production, but for this example, it's perfect.)

<h2 style="border-style: solid;border-width: 1px;border-color:blue;">Something</h2>

You can try this here, I've made a workspace for you: https://www.w3schools.com/code/tryit.asp?filename=FTZOCCY04NG3