Margin creates empty space around an element, outside its border. It ensures elements don't touch each other. Unlike padding, margin does not have a background color.

System Check

Where is the margin located in the Box Model?

Inside the borderOutside the borderBetween content and paddingInside the content

Community Layouts

Share Margin Tricks

Have a unique way to handle negative margins? Share your snippets.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Margin Property

Pascual Vila

Frontend Instructor.

The margin property in CSS is used to create space around elements, outside of any defined borders. It is a key component of the CSS Box Model and is essential for layout spacing.

The Box Model Context

Every element in CSS is a box. From the inside out, it consists of: Content, Padding, Border, and Margin. Margin is the outermost layer, transparent and invisible, used to push other elements away.

Shorthand Syntax

You can specify margins for each side individually or use shorthand to save time:

1 Value: margin: 20px; (All sides)
2 Values: margin: 10px 20px; (Top/Bottom, Left/Right)
3 Values: margin: 10px 20px 30px; (Top, Left/Right, Bottom)
4 Values: margin: 10px 20px 30px 40px; (Top, Right, Bottom, Left - Clockwise)

Margin Collapsing

Top and bottom margins of adjacent elements sometimes collapse into a single margin that is equal to the largest of the two margins. This does not happen on left and right margins.

Auto Margins

Setting margin: 0 auto; on a block element with a defined width is the standard way to center it horizontally within its container. The browser calculates the available space and distributes it equally to the left and right.

Margin Glossary

Margin: The space outside an element's border. It is transparent and used to separate elements.
Padding: The space inside an element's border, between the border and the content.
Collapsing Margins: A behavior where vertical margins of adjacent elements combine into the single largest margin, rather than adding up.
auto: A value that tells the browser to calculate the margin automatically. Commonly used to center elements horizontally.
Negative Margin: Using a negative value (e.g., -10px) to pull an element closer to its neighbor or overlap it.

📖 INDEX

Box Model Mastery

Concept 1: The Margin