Auto margin

2 snippets in HTML & CSS

Also written as margin auto

HCHTML & CSS

Margin

syntax

margin: top right bottom left;
margin: vertical horizontal;
margin: all;

example

.section {
  margin: 40px 0;
}

.container {
  margin: 0 auto; /* center horizontally */
  max-width: 1200px;
}

.spaced-item {
  margin-top: 16px;
  margin-bottom: 16px;
}

Note Vertical margins collapse: when two vertical margins touch, only the larger one applies (not their sum). Margins on flex and grid children do not collapse. Use margin: 0 auto on a block element with a set width to center it.

Flex Spacer Pattern (Push Items Apart)

HC · Flexbox

syntax

margin-left: auto; /* or margin-right: auto */

example

/* Push the last item to the far right */
.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navbar .user-menu {
  margin-left: auto;
}

Note Auto margins in flexbox consume all available space in that direction. This pushes elements apart without justify-content: space-between, which is useful when you need only one item pushed to the end.