CSS: CSS Margins and Padding

Last updated: 2026-10-13

CSS spacing comes in two types: padding and margin. They are key properties for controlling "inner whitespace" and "outer spacing" of elements.

Spacing Properties Quick Reference

Properties in this section: padding margin

1. Padding

padding is the space between the content area and the border — the element's "inner whitespace."

▶ Example

(1) Setting Individual Sides

▶ Example

(2) Padding Shorthand Rules

/* One value: all sides equal */
padding: 20px;

/* Two values: top+bottom, left+right */
padding: 10px 20px;

/* Three values: top, left+right, bottom */
padding: 10px 20px 30px;

/* Four values: top, right, bottom, left (clockwise) */
padding: 10px 20px 30px 40px;

(3) Common Padding Use Cases

▶ Example

(4) Padding Notes

• Padding area shows the element's background color and images
• Padding makes elements "larger" (unless using box-sizing: border-box)
• Inline elements (like <span>) only have effective padding horizontally

2. Margin

margin is the space between the element's border and other elements — the element's "outer spacing."

▶ Example

(1) Margin Shorthand Rules

Same as padding:

margin: 20px;            /* All sides equal */
margin: 10px 20px;       /* Top+bottom, left+right */
margin: 10px 20px 30px;  /* Top, left+right, bottom */
margin: 10px 20px 30px 40px; /* Top, right, bottom, left */

(2) Common Margin Use Cases

▶ Example

(3) Using margin: auto for Centering

margin: 0 auto can horizontally center a block element within its parent:

▶ Example

3. Margin Collapse

This is an important CSS concept — adjacent vertical margins collapse into one, taking the larger value.

(1) Scenario 1: Adjacent Siblings

▶ Example

(2) Scenario 2: Parent-Child Elements

When the parent has no padding, border, or content, the child's margin "penetrates" outside the parent:

▶ Example

Avoidance methods:

• Add padding: 1px to parent (or any positive value)
• Add border: 1px solid transparent to parent
• Add overflow: hidden to parent
• Use flex or grid layout

(3) Scenario 3: Empty Elements

A block element with no content, padding, or border will also have its top and bottom margins collapse.

(4) Cases Where Margins Don't Collapse

• Horizontal margins (left/right) don't collapse
• Flex layout children don't collapse
• Floated elements don't collapse
• Absolutely positioned elements don't collapse

4. Choosing Between Padding and Margin

Simple decision method: Should the background cover this area? If yes, use padding; if no, use margin.

Properties in this section: padding margin

❓ FAQ

📖 Summary

• padding and margin are the most commonly used spacing properties in CSS layout
• padding controls inner whitespace, margin controls outer spacing
• Understanding their shorthand rules and the "margin collapse" trap is essential knowledge for reliable layouts
• Globally setting box-sizing: border-box at project start prevents padding from expanding elements and simplifies dimension calculations

📝 Exercises

1. Create a "card group" page with 3 cards, using margin to control spacing between cards.
2. Create a navigation bar using padding to control text-to-border distance in each nav item.
3. Demonstrate "margin collapse" and solve it with at least two different methods.
4. Use margin: 0 auto to center an 800px-wide container horizontally on the page.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us