What Is CSS Margin?

Margin is the space outside an element’s border. It pushes other elements away from it. If an element is a “box,” margin is the “personal bubble” around that box.

  • Margin adds space outside the border.
  • Padding adds space inside the border (between content and border).
  • Margin is usually transparent. 
.card {
  margin: 24px;
}
  
.card {
  margin: 0;
}
  
.card {
  margin: 48px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 12px;
  padding: 18px;
  max-width: 980px;
  font-family: system-ui, Arial, sans-serif;
}

.stage {
  border: 3px solid #111;
  background: #f6f6f6;
  padding: 16px;
  border-radius: 12px;
}

.card {
  border: 3px solid #111;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
}

.card p {
  margin: 0;
  line-height: 1.4;
}

.hint {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 10px;
}
  

  

    

      
Card with margin variations.

      
Try switching snippets to see how the outside spacing changes.

CSS margin Property

The margin property controls the spacing outside an element. You can set it in four directions: margin-top, margin-right, margin-bottom, margin-left.

CSS Margin Order TRBL

When you use the shorthand margin with multiple values, the order is: Top, Right, Bottom, Left (TRBL). A classic way to remember it: “clockwise starting from top.”

  • 1 value: all sides (margin: 20px;)
  • 2 values: vertical | horizontal (margin: 20px 40px; means top/bottom 20px and left/right 40px)
  • 3 values: top | horizontal | bottom (margin: 10px 30px 50px;)
  • 4 values: top | right | bottom | left (margin: 10px 20px 30px 40px;) 
.box {
  margin: 24px;
}
  
.box {
  margin: 20px 60px;
}
  
.box {
  margin: 10px 60px 40px;
}
  
.box {
  margin: 10px 30px 50px 90px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 12px;
  padding: 18px;
  max-width: 980px;
  font-family: system-ui, Arial, sans-serif;
}

.stage {
  border: 3px solid #111;
  background: #f6f6f6;
  border-radius: 12px;
  padding: 12px;
}

.box {
  border: 3px dashed #111;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
}

.label {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}

.title {
  margin: 8px 0 0 0;
  font-size: 18px;
}
  

  

    

      
Watch the distance between this box and the container.

      
TRBL shorthand demo

CSS Margin Shorthand

Shorthand is not just shorter to type — it also helps you think in patterns: “same on all sides,” “same vertically and horizontally,” etc.

For example, a very common layout pattern is: margin: 0 auto; (we’ll cover auto soon).

Units You’ll Actually Use for Margins

  • px: reliable fixed spacing (good for small UI details)
  • rem: spacing that scales with font size (great for consistent design systems)
  • %: percentage margins are based on the container’s width (yes, even vertical margins) 
.panel {
  margin: 24px;
}
  
.panel {
  margin: 1.5rem;
}
  
.panel {
  margin: 8%;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  display: grid;
  gap: 12px;
  padding: 18px;
  max-width: 980px;
  font-family: system-ui, Arial, sans-serif;
}

.frame {
  border: 3px solid #111;
  background: #f6f6f6;
  border-radius: 12px;
  padding: 12px;
}

.panel {
  border: 3px solid #111;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
}

.note {
  margin: 0;
  opacity: 0.85;
  font-size: 14px;
  line-height: 1.4;
}
  

  

    

      

        Switch snippets to compare px, rem, and %.
        (Reminder: percentage margin is based on container width.)

Negative Margins

Margins can be negative. This pulls elements closer together (or even overlaps them). It’s useful, but it’s also something to be careful with. It can sometimes lead to unexpected layout issues. 

.tag {
  margin-left: -8px;
}
  
.tag {
  margin-left: 0;
}
  
.tag {
  margin-left: 18px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  padding: 18px;
  max-width: 980px;
  font-family: system-ui, Arial, sans-serif;
}

.card {
  border: 3px solid #111;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #f6f6f6;
  border: 3px solid #111;
}

.name {
  margin: 0;
  font-size: 18px;
}

.tag {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 3px solid #111;
  background: #f6f6f6;
  font-size: 14px;
  line-height: 1;
}

.desc {
  margin: 12px 0 0 0;
  opacity: 0.85;
  line-height: 1.4;
}
  

  

    

      

      
Alex

      PRO
    

    

      Negative margin can “pull” the tag closer to the name (or overlap a bit).

CSS Margin vs Padding

People often mix these up because both create space. The key difference:

  • Margin pushes other elements away (space outside).
  • Padding pushes the content away from the border (space inside).

If you add a background color, padding is “painted” (background extends into padding). Margin is not painted (it’s outside the box). 

.box {
  margin: 24px;
  padding: 0;
}
  
.box {
  margin: 0;
  padding: 24px;
}
  
.box {
  margin: 24px;
  padding: 24px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  padding: 18px;
  max-width: 980px;
  font-family: system-ui, Arial, sans-serif;
}

.stage {
  border: 3px solid #111;
  background: #f6f6f6;
  border-radius: 12px;
}

.box {
  border: 3px solid #111;
  border-radius: 12px;
  background: #fff;
}

.box p {
  margin: 0;
  line-height: 1.4;
}

.badge {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 10px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #f2f2f2;
  font-size: 14px;
}
  

  

    

      
Margin vs padding changes where the spacing lives.

      Try the snippets

Learn more about padding in the CSS Padding Interactive Tutorial.

CSS Margin: auto

auto is special. For horizontal margins on a block-level element, it can “absorb” remaining space. This is why margin-left: auto is such a classic trick.

Center a Block with margin: 0 auto

To center a block element horizontally, the element needs a width constraint (width or max-width), and then you do: margin-left: auto and margin-right: auto (commonly written as margin: 0 auto). 

.card {
  margin: 0 auto;
}
  
.card {
  margin-inline: auto;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  padding: 18px;
  max-width: 980px;
  font-family: system-ui, Arial, sans-serif;
}

.stage {
  border: 3px solid #111;
  background: #f6f6f6;
  border-radius: 12px;
  padding: 14px;
}

.card {
  width: min(340px, 100%);
  border: 3px solid #111;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
}

.card p {
  margin: 0;
  line-height: 1.4;
}

.tip {
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.85;
}
  

  

    

      
Centered card using margin: 0 auto or the equivalent margin-inline: auto.

      
This works because the card has a constrained width.

Learn more in the Centering With CSS Interactive Tutorial.

Push a Nav Item to the Right

In a flex row, margin-left: auto on one item pushes it to the far right. That item's left margin takes up all available space on its left side. 

.nav a.account {
  margin-left: auto;
}
  
.nav a.account {
  margin-left: 0;
}
  
.nav a.help {
  margin-left: auto;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  padding: 18px;
  max-width: 980px;
  font-family: system-ui, Arial, sans-serif;
}

.nav {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 3px solid #111;
  border-radius: 999px;
  padding: 10px;
  background: #fff;
}

.nav a {
  display: inline-block;
  padding: 8px 12px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #f6f6f6;
  color: #111;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

.note {
  margin: 12px 0 0 0;
  opacity: 0.85;
  font-size: 14px;
  line-height: 1.4;
}
  

  

  

    Try the snippets: margin-left: auto can “claim” the remaining space.

For this to work, the .nav needs to be a flex container. Learn more in the CSS Flexbox Interactive Tutorial.

CSS Margin Collapse

Margin collapsing is when vertical margins (top/bottom) of block elements combine into a single margin instead of adding together. This surprises beginners because it feels like math should be “10 + 20 = 30” — but CSS sometimes goes: “Nah, let’s just take the bigger one.”

When Margins Collapse

  • Vertical margins between two block elements can collapse (like a heading followed by a paragraph).
  • A parent and its first/last child can collapse in some situations (common “why is my container not moving?” moment).
  • This is mainly about vertical margins in normal document flow. Horizontal margins do not collapse. 
h3 {
  margin: 0 0 30px 0;
}

p {
margin: 20px 0 0 0;
} 
h3 {
  margin: 0 0 30px 0;
}

p {
  margin: 50px 0 0 0;
}
  
h3 {
  margin: 0 0 10px 0;
}

p {
  margin: 20px 0 0 0;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  padding: 18px;
  max-width: 980px;
  font-family: system-ui, Arial, sans-serif;
}

.card {
  border: 3px solid #111;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
}

h3,
p {
  line-height: 1.4;
}

.small {
  margin: 14px 0 0 0;
  font-size: 14px;
  opacity: 0.85;
}
  

  

    
Heading

    
Paragraph under the heading. The vertical gap can collapse.

    

      Tip: the space between the heading and the first paragraph is often the largest of the two touching margins.

How to Prevent Margin Collapse

You don’t “turn off” margin collapsing with a single property everywhere, but you can prevent it in common layouts by:

  • Adding padding to the parent (even padding-top: 1px works).
  • Adding a border to the parent (even transparent).
  • Creating a new formatting context like overflow: auto or display: flow-root.

Practical Margin Gotchas

Inline Elements and Vertical Margins

Inline elements (like <span>) don’t behave like block boxes. Setting margin-top / margin-bottom on a purely inline element often won’t affect layout the way you expect. If you need vertical spacing, consider display: inline-block or use a block element. 

.tag {
  margin-top: 24px;
  margin-bottom: 24px;
}
  
.tag {
  display: inline-block;
  margin-top: 24px;
  margin-bottom: 24px;
}
  
.tag {
  display: block;
  margin-top: 24px;
  margin-bottom: 24px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  padding: 18px;
  max-width: 980px;
  font-family: system-ui, Arial, sans-serif;
}

.box {
  border: 3px solid #111;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  line-height: 1.6;
}

.tag {
  border: 2px solid #111;
  border-radius: 999px;
  padding: 4px 10px;
  background: #f6f6f6;
}

.note {
  margin: 12px 0 0 0;
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.4;
}
  

  

    

      This is text with an inline
      tag
      inside it.
    

    

      Try snippets to see how vertical margins behave for inline, inline-block, and block.

Percentage Margins

Percentage margins are calculated from the width of the containing block. That means margin-top: 10% is also based on width — which can be counterintuitive. 

.box {
  margin-top: 10%;
}
  
.box {
  margin-top: 0;
  margin-left: 10%;
}
  
.box {
  margin: 5%;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  padding: 18px;
  max-width: 980px;
  font-family: system-ui, Arial, sans-serif;
}

.frame {
  border: 3px solid #111;
  border-radius: 14px;
  background: #f6f6f6;
  padding: 12px;
  height: 240px;
}

.box {
  border: 3px solid #111;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  width: 220px;
}

.box p {
  margin: 0;
  line-height: 1.4;
}

.note {
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.85;
}
  

  

    

      
% margin demo

      
Percent is based on container width.

Logical Margin Properties

Instead of thinking “left/right/top/bottom,” logical properties let you think in writing direction:

  • margin-inline affects left/right in left-to-right languages.
  • margin-block affects top/bottom in typical horizontal writing mode.

These are especially handy for multilingual layouts or different writing modes. 

.card {
  margin-inline: auto;
}
  
.card {
  margin-inline: 40px;
}
  
.card {
  margin-block: 30px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  padding: 18px;
  max-width: 980px;
  font-family: system-ui, Arial, sans-serif;
}

.stage {
  border: 3px solid #111;
  border-radius: 14px;
  background: #f6f6f6;
  padding: 14px;
}

.card {
  width: min(360px, 100%);
  border: 3px solid #111;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
}

.card p {
  margin: 0;
  line-height: 1.4;
}

.tip {
  margin-top: 10px;
  opacity: 0.85;
  font-size: 14px;
}
  

  

    

      
Logical margins can be nicer than left/right in many layouts.

      
Try snippets: margin-inline and margin-block.

CSS Margin Recap

  • Use margin for space outside an element; use padding for space inside.
  • Shorthand follows TRBL: top, right, bottom, left (clockwise).
  • margin: 0 auto centers a constrained-width block horizontally.
  • margin-left: auto is a great “push this to the right” trick in flex layouts.
  • Margin collapsing affects vertical margins in normal flow; prevent it with padding, borders, flow-root, or certain overflow settings.