How Do You Set Equal Margins on All Sides in CSS?

When designing a web layout, spacing is everything. One of the simplest and most common spacing tasks in CSS is setting equal margins on all sides of an element. Whether you’re centering a button or creating consistent padding around a card, equal margins help maintain balance and alignment in your design.

In this post, we’ll answer the question:
How do you set equal margins on all sides using CSS?
And we’ll show you the most effective ways to do it.

---

✅ The Simplest Way: margin Shorthand

The most straightforward way to set equal margins on all four sides—top, right, bottom, and left—is to use the margin shorthand property with a single value.

Syntax:

margin: <value>;

Example:

.box {
  margin: 20px;
}

This applies 20px of margin to all four sides of the .box element.

---

📐 How It Works

When the margin property is given one value, that value is applied equally to:

• margin-top
• margin-right
• margin-bottom
• margin-left

This approach is clean, concise, and widely supported in all browsers.

---

💡 Use Any Valid CSS Unit

You’re not limited to pixels. You can use:

• px (pixels)
• em (relative to font size)
• % (relative to containing element)
• rem (relative to root font size)
• vw / vh (viewport width/height)

Example:

.container {
  margin: 2rem;
}

---

🎯 Use Case: Centering Elements

One popular use of equal side margins (especially horizontal) is centering a block-level element:

.centered-box {
  width: 300px;
  margin: 0 auto;
}

This sets the top and bottom margin to 0, and left and right to auto, which centers the element horizontally in its container.

---

🧪 Bonus: Using inherit or initial

You can also set all margins to inherit from the parent or revert to the browser’s default:

margin: inherit; /* Inherits margin from parent */
margin: initial; /* Resets to default (usually 0) */

---

📝 Conclusion

To set equal margins on all sides of an element in CSS, simply use the margin shorthand with a single value:

margin: 20px;

It’s a clean and efficient way to apply uniform spacing around your elements. Understanding and leveraging this technique helps keep your CSS concise, readable, and maintainable.