When to use margin vs padding in CSS [closed]

Question

When writing CSS, is there a particular rule or guideline that should be used in deciding when to use margin and when to use padding?

Answer 1

There are more technical explanations for your question, but if you're looking for a way to think about margin & padding that will help you choose when and how to use them, this might help.

Compare block elements to pictures hanging on a wall:

• The browser window is just like the wall.
• The content is just like a photograph.
• The margin is just like the wall space between framed pictures.
• The padding is just like the matting around a photo.
• The border is just like the border on a frame.

When deciding between margin & padding, it's a nice rule of thumb to use margin when you're spacing an element in relationship to other things on the wall, and padding when you're adjusting the appearance of the element itself. Margin won't change the size of the element, but padding will typically make the element bigger¹.

¹ This default box model can be altered with the box-sizing attribute.

Answer 2

First let's look at what are the differences and what each responsibility is:

1) Margin

The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the border. With CSS, you have full control over the margins.
There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left).

2) Padding

The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an element.
With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

So simply Margins are space around elements, while Padding are space around content which are part of the element.

This image from codemancers shows how margin and borders get togther and how border box and content-box make it different.

Also they define each section as below:

• Content - this defines the content area of the box where the actual content like text, images or maybe other elements reside.
• Padding - this clears the main content from its containing box.
  
• Border - this surrounds both content and padding.
• Margin - this area defines a transparent space that separates it from other elements.

Answer 3

CSS Margin, padding and border are Box Model properties.

• Margin is space outside content.
• Padding is space inside content.
• Border is a visible outline (any color, style and width) outside padding.

Total width=content-width + padding + border.

Answer 4

The thing about margins is that you don't need to worry about the element's width.

Like when you give something {padding: 10px;}, you'll have to reduce the width of the element by 20px to keep the 'fit' and not disturb other elements around it.

So I generally start off by using paddings to get everything 'packed' and then use margins for minor tweaks.

Another thing to be aware of is that paddings are more consistent on different browsers and IE doesn't treat negative margins very well.

Answer 5

The margin clears an area around an element (outside the border), but the padding clears an area around the content (inside the border) of an element.

it means that your element does not know about its outside margins, so if you are developing dynamic web controls, I recommend that to use padding vs margin if you can.

note that some times you have to use margin.

Answer 6

The best I've seen explaining this with examples, diagrams, and even a 'try it yourself' view is here.

The diagram below I think gives an instant visual understanding of the difference.

One thing to keep in mind is standards compliant browsers (IE quirks is an exception) render only the content portion to the given width, so keep track of this in layout calculations. Also note that border box is seeing somewhat of a comeback with Bootstrap 3 supporting it.