Generator Tools
CSS Margin & Padding Shorthand Generator
Convert CSS margin and padding between shorthand and longhand in your browser. See the top, right, bottom, left order with a live edge preview.
Enter one to four values separated by spaces. Units are kept exactly as typed (px, rem, em, %, auto, 0, calc(...)).
Examples
Edge preview
Clockwise order: top, right, bottom, left.
Top
16px
Right
24px
Bottom
16px
Left
24px
Generated CSS
Shorthand
margin: 16px 24px;
Longhand (four properties)
margin-top: 16px; margin-right: 24px; margin-bottom: 16px; margin-left: 24px;
Everything is computed in your browser. Nothing you type is uploaded.
Shorthand value order
CSS reads margin shorthand clockwise. The number of values you supply changes which edges they map to.
| Values | Example | Maps to |
|---|---|---|
| 1 | margin: 10px | All four edges |
| 2 | margin: 10px 20px | Top and bottom | left and right |
| 3 | margin: 10px 20px 30px | Top | left and right | bottom |
| 4 | margin: 10px 20px 30px 40px | Top | right | bottom | left |
How to use
- Choose margin or padding, then pick a direction: shorthand to longhand or longhand to shorthand.
- For shorthand to longhand, type one to four space-separated values, for example 10px 20px 30px 40px.
- For longhand to shorthand, type a value for each edge and the shortest valid shorthand is built for you.
- Read the live edge preview to confirm the top, right, bottom, and left values.
- Copy the shorthand or the four longhand properties with the Copy buttons.
About this tool
CSS Margin & Padding Shorthand Generator converts spacing values between the compact shorthand and the four explicit longhand properties, in both directions. Margin and padding share the same shorthand grammar: one to four space-separated values map to the four edges in clockwise top, right, bottom, left order (often called TRBL). One value sets all four edges, two values set vertical then horizontal, three values set top, horizontal, then bottom, and four values set each edge explicitly. Paste a shorthand value to get the four separate margin-top, margin-right, margin-bottom, and margin-left declarations, or type each edge to collapse them into the shortest valid shorthand. A live preview labels every edge with its resolved value so the order is obvious, and a reference table spells out how the one to four value rule works. Units are never rewritten, so px, rem, em, percentages, auto, zero, and calc values are preserved exactly as you type them. Everything runs in your browser, so nothing you enter is uploaded.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
CSS Box Model Visualizer
Interactive box model diagram with live padding, border, margin, and box-sizing calculations.
Open tool
GeneratorCSS Clamp Generator
Build clamp() for fluid type and spacing with a live viewport preview.
Open tool
ConverterCSS Unit Converter
Convert between every CSS length unit with configurable root, viewport, and percent reference.
Open tool