inset All-Four Offsets Shorthand
Expand one to four finite pixel inset values into top, right, bottom, and left offsets.
Description
Inset shorthand uses the same one-to-four-value physical-side pattern as many CSS box shorthands.
Inset shorthand uses the same one-to-four-value physical-side pattern as many CSS box shorthands. Missing values repeat earlier values rather than defaulting independently to zero.1
Expand one to four finite pixel inset values into top, right, bottom, and left offsets.
When to use inset All-Four Offsets Shorthand
Use this tool to expand one to four finite pixel inset values into top, right, bottom, and left offsets.
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 inset All-Four Offsets Shorthand 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 values 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 |
|---|---|---|---|
| values | Inset values in pixels | list of number; minimum entries: 1; maximum entries: 4 | Required |
Enter a list of one through four finite pixel offsets. The tool assigns top from the first value, right from the second or top, bottom from the third or top, and left from the fourth or right. It returns all four explicit physical offsets and permits negative numbers.
one: all first; two: vertical first, horizontal second; three: top first, horizontal second, bottom third; four: clockwise Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| top | Top offset | number |
| right | Right offset | number |
| bottom | Bottom offset | number |
| left | Left offset | number |
{
"input": {
"values": [
10,
20,
30
]
},
"output": {
"top": 10,
"right": 20,
"bottom": 30,
"left": 20
}
}Limitations and assumptions
It expands numeric offsets without positioning an element. Auto, percentages, CSS expressions and logical inset shorthands are not parsed. The result alone does not determine final size when opposing offsets interact with other positioning properties.
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 Margin 4-Value Shorthand Expansion: Expand four finite pixel margins in top, right, bottom, left order. For a complementary task, use Padding 3-Value Shorthand Expansion: Expand three nonnegative pixel paddings, using the second value for both left and right.
References
-
inset All-Four Offsets Shorthand — tool.io
Similar or alternative tools
- Margin 4-Value Shorthand Expansion
Expand four finite pixel margins in top, right, bottom, left order.
- Padding 3-Value Shorthand Expansion
Expand three nonnegative pixel paddings, using the second value for both left and right.