Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Dan Gerdes
Dan Gerdes
13,059 Points

Margins vs. Padding in CSS

I'm wondering about why we sometimes use margin values to achieve what we could just as well use padding values for and vice versa. Is it just preference or are there legitimate reasons depending on the context? I believe there may be pros and cons to each, but not sure what they are. If memory serves, I don't think margins work on inline elements. Any discussion would be appreciated. Thanks!

4 Answers

Jacob Miller
Jacob Miller
12,466 Points

One example might be a link - adding padding would make the link area larger, while using margin would just add space around it. Padding makes your content area larger, while margin makes space around your content without affecting it's area. So yeah, it depends on the context.

Top and bottom margins don't affect inline elements, but left and right margins do. So if you wanted to add some space on the top or bottom of an inline element you could use padding.

Dan Gerdes
Dan Gerdes
13,059 Points

Jacob...thanks to you and Sean's answers (and a decent nights' sleep), something clicked and I was able to understand it better. It really helps to play around with these things.

Sean T. Unwin
Sean T. Unwin
28,686 Points

Inline vs Block elements.

Block elements have a line-break before and after and can be placed independently, anywhere within the plane (x,y coordinates) of a page.

Inline elements, as the name suggests, are placed upon an invisible line. This means that padding and margins only affect the horizontal axis because the 'line' that the inline elements are placed upon are locked to the x-axis. Vertical (y-axis) padding, margins, and even height, are, essentially, ignored.

The way that I look at one way of answering Dan Gerdes's question is this:

  • Margins are outside.
  • Margins are for how close another element can get to this element.
  • Padding is inside.
  • Padding is for presentation within an element, like how a window on a door is placed in a nice, centered fashion. In other words, how close can objects inside be placed to the inside edges of this element.

Quick tip: If you absolutely need to change the height of an inline element, such as a <span>, for example, then change the value of the line-height property. There are some caveats with this, although, I won't delve into that at this time. I encourage you to experiment with the line-height, font-size, and vertical-align properties on an inline element.

Adriano dos Reis
Adriano dos Reis
1,766 Points

Nice Answer Jacob!

i am just watching the video "Writting CSS" and on the minute 7:30 the teacher add a "margin: 40px 0px;" to a button ".btn" but actually even that he said it moved slightly it didn't move at all hahah I dont understand why some elements get sort of "stuck" sometimes and don't behave when we set up a certain margin value.

have anyone wondered the same thing?

Dan Gerdes
Dan Gerdes
13,059 Points

Jacob & Sean...thank you both! After sleeping on it and reading your answers, something clicked and I was able to understand it better. It really helps to play around with these things.