In CSS, the main difference between margin and padding is that they affect different parts of the box model. 1. margin controls the space outside the element border, which is used to adjust the distance between the element and other elements; 2. padding controls the space inside the element border, which is used to adjust the distance between the content and the border. For example, setting .box { margin: 20px; } will create 20px external space around the element, while setting .box { padding: 15px; } will create 15px internal space between the content and the border. In use scenarios, if you want to separate blocks or center elements, use margin; if you want to add space to text in the button or expand the background area, use padding. The two can also be used in combination, such as setting the inner and outer spacing for the card components at the same time. After understanding the box model, it will be more natural to choose margin or padding.

The difference between margin and padding in CSS boils down to what part of the box model they affect. In short: margin is outside the border, padding is inside .

Let's break it down into practical terms you might actually use when building layouts.

What margin does

Margin controls the space outside of an element's border — basically how much space it takes up on the page in relation to other elements.

• If you want two boxes to be spaced apart from each other, you'd typically adjust their margins.
• Margins can collapse (especially top and bottom ones), which is a behavior that often surprises new developers.
• You can set individual sides ( margin-top , margin-right , etc.) or use shorthand like margin: 10px 20px; .

Example:

 .box {
  margin: 20px;
}

This means there will be 20px of space around all four sides of .box between it and neighboring elements.

What padding does

Padding affects the space inside the element — between the content and the border.

• Padding increases the size of the element itself.
• It affects background color or images — those will extend into the padding area.
• Padding does not collapse like margins do.

Example:

 .box {
  padding: 15px;
}

This pushes the content inside the box 15px away from the edges, making the box visually larger.

Visualizing the difference

Think of a picture frame:

• The content is the photo inside.
• The padding is the mating around the photo.
• The border is the actual frame.
• The margin is how far the whole frame sits from other frames on the wall.

So:

• Use padding if you want more breathing room inside the box.
• Use margin if you want to push other elements away from the box.

When to use one over the other

Here are some real-world scenarios:

Use margin when:

• You want to separate blocks from each other.
• You're centering an element with margin: 0 auto; .
• You need negative spacing (eg, pull an element left or right).

Use padding when:

• You want to create space around text inside a button.
• You're adjusting spacing without affecting adjacent elements.
• You want background colors or borders to include the extra space.

Sometimes both are used together — for example, giving a card component some internal spacing with padding and external spacing with margin.

That's the basic idea. Once you get comfortable seeing the box model in your mind, choosing between margin and padding becomes second nature.

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!