Margin
Create space between elements with margin.
Step 1 of 3
Margin: space outside the box
Margin is the outermost layer of the box model. It creates space between one element and its neighbors — the spacing between paragraphs on Wikipedia, or the gaps between movie cards on Netflix. Without margin, every element would press right against its neighbors.
Unlike padding and border, margin is always transparent. You can't see it, but it pushes other elements away. In our visualization, margin is the orange layer.
Think of it this way: Margin is like your personal space bubble. You can't see it, but it keeps other people at a comfortable distance.
Web Standard
Vertical margins between adjacent block elements collapse — only the larger margin is used. This is called margin collapsing and is one of the most surprising CSS behaviors for beginners.
Learn more on MDN
THE CSS BOX MODEL
margin
border
padding
content
Content
Padding
Border
Margin