Margins vs. Padding in CSS

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.

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.

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?

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.