If you often find yourself forgetting the correct order of margin values in CSS shorthand notation, you are not alone. This quick guide serves as a reminder to save you from repeated online searches.
🧾 Full Margin Notation
h1 {
margin: 10px 20px 15px 5px;
}
In this example, the values follow a clockwise order:
Top:
10pxRight:
20pxBottom:
15pxLeft:
5px
The rule is simple: top right bottom left.
✂️ Using 1 to 3 Values
CSS also allows shorthand notations with fewer values:
1 Value
margin: 10px;
Applies to all four sides.
2 Values
margin: 10px 20px;
Top and bottom:
10pxLeft and right:
20px
3 Values
margin: 10px 20px 15px;
Top:
10pxLeft and right:
20pxBottom:
15px
🧠 Just a Personal Reminder
The only reason for writing this is to remind myself of the order. It gets tiring to search it every time. Hopefully, now I will remember it better.