Margin, Padding and Spacing Shorthands

What Is It?

Margin and padding accept one to four values. Reading the order correctly is essential when spacing is different on each edge.

Properties, Tags and Attributes Explained

• margin / padding: One value sets all edges; two set vertical then horizontal; three set top, horizontal, bottom; four set top, right, bottom, left.
• margin-top / margin-right / margin-bottom / margin-left: Set one physical outer edge.
• padding-top / padding-right / padding-bottom / padding-left: Set one physical inner edge.
• gap: Sets row and column gutters for Grid, Flexbox, and multi-column layout.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Two and four values

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Margin, Padding and Spacing Shorthands</title>
  <style>
    .demo { background: #dbeafe; padding: 8px 24px 32px 12px; margin: 16px 8px; border: 2px solid #2563eb; }
  </style>
</head>
<body>
  <div class="demo">Top 8, right 24, bottom 32, left 12 pixels of padding.</div>
</body>
</html>

What you see: The bottom inner space is larger than the top space. The outer margin is 16px vertically and 8px horizontally.

Example 2: Space siblings with gap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Margin, Padding and Spacing Shorthands</title>
  <style>
    .demo > div { background: #dbeafe; padding: 12px; border: 1px solid #93c5fd; }
    .demo { display: grid; gap: 16px; }
  </style>
</head>
<body>
  <div class="demo"><div>One</div><div>Two</div><div>Three</div></div>
</body>
</html>

What you see: The grid places a consistent 16px gutter only between items.

Example 3: Change individual margin and padding edges

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Margin, Padding and Spacing Shorthands</title>
  <style>
    .box { margin-top: 8px; margin-right: 12px; margin-bottom: 16px; margin-left: 20px; padding-top: 8px; padding-right: 12px; padding-bottom: 20px; padding-left: 24px; border: 2px solid #2563eb; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="box">Each physical edge has an independent longhand.</div>
</body>
</html>

What you see: The four margin values control outside spacing and the four padding values control inside spacing. Use a longhand when adjusting one edge without resetting the others.

When and Where to Use It

Use shorthands for readable repeated spacing and individual longhands when changing one edge. Use gap when spacing belongs between layout items.

Common Mistake or Useful Tip

Vertical margins between ordinary block boxes may collapse; padding and grid/flex gaps do not collapse.

Try It Yourself

Change the four padding values one at a time and identify each edge.