In CSS, margin and padding control spacing externally and internally, respectively. 1. Margin sets space outside an element, affecting spacing between elements without altering its size. 2. Padding sets space inside an element, increasing its size and pushing content away from the edges. 3. Margins can collapse vertically and be negative, while padding cannot. 4. Use margin for spacing between elements and padding for internal spacing within an element.

When you're trying to control spacing in CSS, two properties you'll run into right away are margin and padding. They might look similar when you’re first learning, but they serve very different purposes. In short: margin is outside the box, padding is inside.

What margin does in CSS

Margin controls the space outside of an element — the area between this element and other elements on the page. It doesn’t affect the element's own size, just how much breathing room it has from its neighbors.

• If you want to push another div away from this one, use margin.
• Margins can collapse vertically (this means two vertical margins next to each other might merge into one), which sometimes surprises beginners.
• You can set all four sides (margin-top, margin-right, etc.), or shorthand like margin: 10px 20px;.

For example:

.box {
  margin: 20px;
}

This adds 20px of space around the entire box, pushing other content away.

What padding does in CSS

Padding is the space inside the element — between the content and the border. When you add padding, you're effectively making the element itself bigger (assuming box-sizing is set to content-box, which is default).

• Padding affects background color and borders. If your box has a background, that background will extend into the padding area.
• Padding doesn’t push other elements away directly, but it pushes the content away from the edges.

Here’s a simple case:

.text-box {
  padding: 15px;
}

Now, any text inside .text-box will have 15px of space from the edge.

Visualizing the difference

Think of a picture frame:

• The margin is like the empty wall space around the frame — how far it sits from other frames.
• The padding is the matting inside the frame — the space between the photo and the glass/frame.

So if you increase the padding, the photo (your content) moves inward. If you increase the margin, the whole frame moves away from nearby objects.

When to use margin vs padding

Sometimes the choice isn't obvious. Here are a few practical tips:

• Use margin when you want space between elements.
• Use padding when you want internal spacing without changing layout flow too much.
• Want to center something? Try margin: 0 auto;.
• Need more space inside a button so text doesn’t touch the edges? That’s padding.

Also keep in mind:

• Backgrounds and borders include padding.
• Margins can be negative, which lets you pull elements closer together.
• Padding cannot be negative.

Basically, think of margin as external spacing and padding as internal. Once you get used to that distinction, positioning and spacing elements gets a lot easier.

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