CSS Property: margin

Think of the CSS margin property as your very own personal space bubble. It’s that buffer zone you maintain between you and the folks milling around you at a concert, or the distance you keep from a delicate, priceless vase at a museum. It’s all about maintaining a healthy distance.

In the CSS world, margin does precisely that. It creates space around elements, outside of any defined borders. margin nudges your elements, giving them some breathing room from their neighboring elements. It’s the invisible forcefield keeping harmony in your design.

Syntax

The margin property may look simple on the surface, but like an unassuming iceberg, there’s a lot going on beneath the surface. The syntax for the margin property is:

1	margin: [length] \| [percentage] \| auto;

The property takes up to four values that apply to the top, right, bottom, and left margins respectively. If you specify one value, it sets the margin for all sides. Two values set the top/bottom and left/right. Three values set top, left/right, and bottom. Four values set top, right, bottom, and left (in that order).

/* All margins set to 10px */
margin: 10px;

/* Top/bottom margins are 10px; Right/left margins are 15px */
margin: 10px 15px;

/* Top margin is 10px; Right/left margins are 15px; Bottom margin is 5px */
margin: 10px 15px 5px;

/* Top margin is 10px; Right margin is 15px; Bottom margin is 5px; Left margin is 20px */
margin: 10px 15px 5px 20px;

Default value: The default value for the margin property is 0.
Applicability: The margin property can be applied to all elements, except elements with table display types other than table-caption, table and inline-table.
Inheritance: The margin property does not inherit from its parent element.
Animation: Yes, CSS animations can be applied to it. You can make elements dance around each other with a choreography of margin changes, but remember to use it judiciously to avoid a chaotic jamboree.

Keyword Values

Let’s have a look at the values you can use with the margin property.

length

The length value allows you to specify a fixed size for your margins. The key is in your hand, you decide how wide your space bubble is. You could set it in px, em, rem, or any other length unit.

1	margin: 10px; /* A cozy personal space of 10 pixels all around */

percentage

A percentage value bases the size of the margin on the width of the parent element. So if you’re in a tight container, the margin adjusts itself to maintain proportional harmony.

1	margin: 5%; /* The margin is 5% of the width of the containing element */

auto

The auto value lets the browser decide the margin for you. It’s like letting a friend decide the distance to keep from the stage at a rock concert. It balances spaces in a way that centers the element within its parent.

1	margin: auto; /* Let the browser decide */

The margin property also accepts negative values!

Learn More

A fascinating little-known fact about CSS margins is margin collapse. When the top and bottom margins of two elements meet, they kind of high-five and become one. The larger of the two survives, and the smaller margin just...collapses. The resulting margin is equal to the larger of the adjacent margins. This is a fun quirk that only applies to vertical margins and does not apply to horizontal (left and right) margins.

“Understanding the mechanics of CSS layout, such as margin collapsing, is one of the most important steps to mastering CSS” — Rachel Andrew