# CSS Box

### What It Does

Creates CSS box model notation by combining four values (top, right, bottom, left) into a single space-separated string. This is the standard format used for CSS properties like margin, padding, and border-width.

### Inputs

| Name   | Description      | Type   | Required |
| ------ | ---------------- | ------ | -------- |
| top    | The top value    | Number | No       |
| right  | The right value  | Number | No       |
| bottom | The bottom value | Number | No       |
| left   | The left value   | Number | No       |

### Outputs

| Name  | Description                                      | Type |
| ----- | ------------------------------------------------ | ---- |
| value | The combined CSS box value (e.g., "10 20 10 20") | Text |

### How to Use It

1. Drag the CSS Box node into your graph.
2. Set values for each side: "top" (e.g., 10), "right" (e.g., 20), "bottom" (e.g., 10), "left" (e.g., 20).
3. Run the graph—your output will be "10 20 10 20".
4. Use this output with CSS properties like margin, padding, or border-width.

![CSS Box Example](https://github.com/tokens-studio/studio-public-docs/blob/preview/graph-engine/available-nodes/css/screenshot-placeholder.png)

### Tips

* This format follows the CSS standard: top, right, bottom, left (clockwise from the top).
* CSS has shorthand rules: if all four values are the same, you can use a single value.
* When using with CSS, you may need to add units (like "px" or "rem") after the generated string.

### See Also

* **CSS Function**: For creating other CSS functions like var(), calc(), etc.
* **CSS Accessible Clamp**: For generating responsive typography values.
* **String Join**: For combining strings with custom separators.

### Use Cases

* **Margins and Padding**: Define spacing around elements.
* **Border Width**: Set different border widths for each side of an element.
* **Position Offsets**: Define top, right, bottom, left values for positioned elements.
* **Design Tokens**: Create standardized spacing values for your design system.