The difference between margin and padding lies in their placement within the box model: margin is outside the border, while padding is inside. Margin controls spacing between elements, can collapse, and supports negative values; padding affects internal spacing, expands the element’s size, and does not collapse. Use margin for spacing elements apart and padding to adjust internal content spacing or background area.

The difference between margin and padding comes down to what part of the box model they affect. In simple terms: margin is outside the border, while padding is inside.

When you're trying to control spacing in your layout—whether it's pushing elements away from each other or adjusting space within an element itself—understanding this distinction helps avoid confusion and layout bugs.

What Margin Does

Margin sits outside the border of an element. It creates space between this element and other elements around it.

• Use margin when you want to push another element away.
• Margins can collapse (more on that later).
• You can set them individually (margin-top, margin-left, etc.) or all at once with shorthand like margin: 10px 20px.

For example, if you have two paragraphs one after another, setting a bottom margin on the first will create space before the second starts.

p {
  margin-bottom: 20px;
}

This is especially useful in layouts where spacing between components matters more than internal spacing.

What Padding Does

Padding is the space between the content and the border of an element.

• It affects the size of the element itself.
• Padding doesn't collapse like margins do.
• Also supports shorthand values like padding: 10px 15px.

Let’s say you have a <div> with text inside. If you add padding, the text won’t stick right up against the edge anymore.

.box {
  padding: 15px;
}

It also impacts background color or images—if you set a background on the element, it’ll extend into the padding area.

Key Differences That Matter

Here are some practical differences you’ll notice:

• Margins don’t affect background, but padding does.
• Margins can be negative, which lets you pull elements closer together. Padding can’t be negative.
• When calculating width/height:
  • Total width = width padding-left padding-right border margin-left margin-right
  • But padding expands the element even without considering margins.

Also, margin collapsing happens when vertical margins of block elements touch each other—they merge into one margin. Padding doesn’t do that.

When to Use Which

Use margin when you're dealing with spacing between elements.
Use padding when you're adjusting internal spacing or sizing an element’s clickable area (like for buttons).

A common use case:

• A card component might have padding so its inner content isn’t flush with the edges.
• Then, margins are used to separate that card from other cards or sections.

Another tip: if you’re using CSS Flexbox or Grid, you might still need margins or padding to fine-tune spacing beyond what gap properties offer.

Basically, think of margin as how much breathing room your element needs from others, and padding as how much personal space the content inside needs. They serve different roles but often work together.

The above is the detailed content of What is the difference between margin and padding?. For more information, please follow other related articles on the PHP Chinese website!