CSS Margin and Padding

Every HTML element is a rectangular box. It has four layers from the inside out: content, padding, border, and margin. Understanding how those layers interact is the key to controlling spacing in CSS.

Padding

padding adds space between the content and the border.

p {
  padding: 20px;
}

You can set each side separately:

p {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Or use shorthand. The values go clockwise: top, right, bottom, left.

/* 1 value: all four sides */
p { padding: 10px; }

/* 2 values: top/bottom, left/right */
p { padding: 10px 20px; }

/* 4 values: top right bottom left */
p { padding: 10px 20px 10px 20px; }

Margin

margin adds space outside the border, between this element and the elements around it.

p {
  margin: 16px;
}

Margin uses the same shorthand pattern as padding:

/* 2 values: top/bottom, left/right */
p { margin: 20px 40px; }

/* 4 values: top right bottom left */
p { margin: 5px 10px 3px 15px; }

Centering with auto

Setting left and right margins to auto centers a block element horizontally inside its parent. The element must have a declared width.

.container {
  width: 800px;
  margin: 0 auto;
}

box-sizing: border-box

By default, width and height set the size of the content area only. Padding and border are added on top of that, which makes elements larger than you might expect.

/* content-box (default): actual width = 200px + 20px padding + 2px border = 222px */
.box {
  width: 200px;
  padding: 10px;
  border: 1px solid black;
}

box-sizing: border-box changes this so that width includes the padding and border. What you declare is what you get.

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 1px solid black;
  /* actual width is exactly 200px */
}

Most projects apply this globally:

*, *::before, *::after {
  box-sizing: border-box;
}

Margin collapse

When two vertical margins meet, they collapse into a single margin equal to the larger of the two, not the sum.

.first {
  margin-bottom: 20px;
}

.second {
  margin-top: 30px;
}

/* The gap between .first and .second is 30px, not 50px */

This only happens with vertical (block) margins. It does not happen with horizontal margins, or inside flex or grid containers.

Negative margins

You can use negative values to pull an element closer to its neighbours or overlap them.

.pulled-up {
  margin-top: -10px;
}

Use negative margins sparingly. They can make layout harder to reason about.

Inline and block elements

How margin and padding behave depends on whether an element is inline or block.

Block elements (such as p, div, h1) take up the full width of their parent and stack vertically. All margin and padding values apply.

Inline elements (such as span, a, strong) flow with text and only take as much width as their content. margin-top, margin-bottom, and vertical padding are ignored or behave unexpectedly.

display: inline-block lets an element flow inline while still respecting vertical margin and padding. Use it when you need an inline-flowing element with full spacing control.

span {
  display: inline-block;
  padding: 4px 8px;
  margin-top: 8px;
}