Padding 3-Value Shorthand Expansion
Expand three nonnegative pixel paddings, using the second value for both left and right.
Description
A three-value padding shorthand uses top, horizontal sides and bottom in that order.
A three-value padding shorthand uses top, horizontal sides and bottom in that order. The repeated horizontal value is often the key to reading or expanding such a declaration correctly.1
Expand three nonnegative pixel paddings, using the second value for both left and right.
When to use Padding 3-Value Shorthand Expansion
Use this tool to expand three nonnegative pixel paddings, using the second value for both left and right.
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 Padding 3-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 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 padding | number; minimum: 0 | Required |
| second | Second padding | number; minimum: 0 | Required |
| third | Third padding | number; minimum: 0 | Required |
Enter three nonnegative pixel values. The tool copies them into explicit top, right, bottom and left outputs, assigning the second input to both horizontal sides. Zero values are valid and no rounding or unit conversion is performed.
top = first; right = left = second; bottom = third Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| top | Top padding | number; minimum: 0 |
| right | Right padding | number; minimum: 0 |
| bottom | Bottom padding | number; minimum: 0 |
| left | Left padding | number; minimum: 0 |
{
"input": {
"first": 10,
"second": 20,
"third": 30
},
"output": {
"top": 10,
"right": 20,
"bottom": 30,
"left": 20
}
}Limitations and assumptions
It expands numeric pixels only, without parsing CSS strings, percentages, calc expressions or logical properties. Negative padding is rejected. It does not compute an element's final dimensions or account for box-sizing.
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 Border-Width 2-Value Expansion: Expand two nonnegative pixel border widths into vertical and horizontal sides. 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
-
Padding 3-Value Shorthand Expansion — tool.io
Similar or alternative tools
- Border-Width 2-Value Expansion
Expand two nonnegative pixel border widths into vertical and horizontal sides.
- inset All-Four Offsets Shorthand
Expand one to four finite pixel inset values into top, right, bottom, and left offsets.