Margin 4-Value Shorthand Expansion
Expand four finite pixel margins in top, right, bottom, left order.
Description
Four-value margin shorthand follows clockwise physical-side order: top, right, bottom and left.
Four-value margin shorthand follows clockwise physical-side order: top, right, bottom and left. Negative margins are allowed in this numeric expansion and remain signed values.1
Expand four finite pixel margins in top, right, bottom, left order.
When to use Margin 4-Value Shorthand Expansion
Use this tool to expand four finite pixel margins in top, right, bottom, left order.
Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
How to use Margin 4-Value Shorthand Expansion and understand its results
- Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
- Enter first, second, third, fourth using the field table and calculation rules, then run the tool.
- Read top, right, bottom, left. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| first | First margin | number | Required |
| second | Second margin | number | Required |
| third | Third margin | number | Required |
| fourth | Fourth margin | number | Required |
Enter four finite pixel margins in shorthand order. The tool returns one value for each physical side without performing arithmetic, rounding or unit conversion. Each input may be positive, zero or negative.
top = first; right = second; bottom = third; left = fourth Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| top | Top margin | number |
| right | Right margin | number |
| bottom | Bottom margin | number |
| left | Left margin | number |
{
"input": {
"first": 1,
"second": 2,
"third": 3,
"fourth": 4
},
"output": {
"top": 1,
"right": 2,
"bottom": 3,
"left": 4
}
}Limitations and assumptions
CSS strings, auto, percentages and calc expressions are unsupported. This does not model margin collapse, layout or the cascade. A writing-mode mapping is a separate step when logical-side values are needed.
Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use Physical→Logical Margin Mapper: Map four finite physical pixel margins to inline and block sides using writing mode and text direction. For a complementary task, use inset All-Four Offsets Shorthand: Expand one to four finite pixel inset values into top, right, bottom, and left offsets.
References
-
Margin 4-Value Shorthand Expansion — tool.io
Similar or alternative tools
- Physical→Logical Margin Mapper
Map four finite physical pixel margins to inline and block sides using writing mode and text direction.
- inset All-Four Offsets Shorthand
Expand one to four finite pixel inset values into top, right, bottom, and left offsets.