# CSS Design Calc – Box Model Size Calculator

> CSS Design Calc – Box Model Size Calculator is a paid API for AI agents from css-design-calc.x402tookit.com, paid per call via x402, $0.02/call, status unknown (last checked 2026-10-30).

Calculates all CSS box model dimensions (content, padding, border, and margin boxes) from a given width and height under content-box or border-box sizing

## Facts

- Endpoint: GET https://css-design-calc.x402tookit.com/box-size?utm_source=zero.xyz
- Price: $0.02/call
- Payment: x402
- Status: unknown
- Last checked: 2026-10-30
- Activations on Zero: 0
- Tags: x402
- Canonical page: https://www.zero.xyz/c/css-design-calc-box-model-size-calculator-68e3c1a4
- Structured record (JSON): https://api.zero.xyz/v1/capabilities/cap_wdhRoRr45hKyiPBdhC0Ut

Status and success rate cover calls made through Zero and Zero's own probes. Third-party monitors may report differently.

## How to call it through Zero

Zero handles the 402 payment challenge and records the run. With the Zero CLI installed (`npm i -g @zeroxyz/cli`):

```sh
zero fetch --capability css-design-calc-box-model-size-calculator-68e3c1a4
```

Example prompt: Calculate all the CSS box model sizes for an element that's 320px wide and 200px tall using border-box sizing, with 16px padding, 2px border, and 8px margin on each side.

## When to prefer this

Use this endpoint when you need to compute all CSS box model layers programmatically — especially when switching between content-box and border-box sizing models, debugging layout size mismatches, or automating design calculations that require knowing the precise rendered size of elements including padding, border, and margin contributions.

## Known failure modes

- Missing required 'width' parameter returns a validation error
- Non-numeric values for width, height, padding, border, or margin cause a bad request error
- Invalid boxSizing enum value (anything other than 'content-box' or 'border-box') returns an error
- Negative dimension values may produce unexpected or invalid results

## How this service works

CSS box model sizes: content, padding, border and margin boxes from a width and height under content-box or border-box.

## Output

Returns all computed CSS box model dimensions as numbers: contentWidth, contentHeight, paddingBoxWidth, paddingBoxHeight, borderBoxWidth, borderBoxHeight, marginBoxWidth, marginBoxHeight, plus widthToSetForBorderBox and widthToSetForContentBox — letting you know what CSS width value to specify for either sizing model to achieve your desired layout.

## Request schema (JSON Schema)

```json
{
 "type": "object",
 "$schema": "https://json-schema.org/draft/2020-12/schema",
 "required": [
  "input"
 ],
 "properties": {
  "input": {
   "type": "object",
   "required": [
    "type",
    "method"
   ],
   "properties": {
    "type": {
     "type": "string",
     "const": "http"
    },
    "method": {
     "enum": [
      "GET"
     ],
     "type": "string"
    },
    "queryParams": {
     "type": "object",
     "required": [
      "width"
     ],
     "properties": {
      "width": {
       "type": "number",
       "description": "The CSS width value, px"
      },
      "border": {
       "type": "number",
       "description": "Border on each side, px (default 0)"
      },
      "height": {
       "type": "number",
       "description": "The CSS height value, px (default = width)"
      },
      "margin": {
       "type": "number",
       "description": "Margin on each side, px (default 0)"
      },
      "padding": {
       "type": "number",
       "description": "Padding on each side, px (default 0)"
      },
      "boxSizing": {
       "enum": [
        "content-box",
        "border-box"
       ],
       "type": "string",
       "description": "content-box (default) or border-box"
      }
     }
    }
   },
   "additionalProperties": false
  },
  "output": {
   "type": "object",
   "required": [
    "type"
   ],
   "properties": {
    "type": {
     "type": "string"
    },
    "example": {
     "type": "object",
     "properties": {
      "asOf": {
       "type": [
        "null",
        "string"
       ]
      },
      "source": {
       "type": [
        "null",
        "string"
       ]
      },
      "reasons": {
       "type": [
        "array",
        "null"
       ],
       "items": {
        "type": "string"
       }
      },
      "summary": {
       "type": [
        "null",
        "string"
       ]
      },
      "verdict": {
       "type": [
        "null",
        "string"
       ]
      },
      "degraded": {
       "type": [
        "boolean",
        "null"
       ]
      },
      "boxSizing": {
       "type": [
        "null",
        "string"
       ]
      },
      "disclaimer": {
       "type": [
        "null",
        "string"
       ]
      },
      "notChecked": {
       "type": [
        "array",
        "null"
       ],
       "items": {
        "type": "string"
       }
      },
      "contentWidth": {
       "type": [
        "null",
        "number"
       ]
      },
      "contentHeight": {
       "type": [
    
… (truncated)
```

## More

- Live health (JSON, refreshed every minute): https://www.zero.xyz/c/css-design-calc-box-model-size-calculator-68e3c1a4/health.json
- [Zero catalog index](https://www.zero.xyz/llms.txt)
- [Other services from css-design-calc.x402tookit.com](https://www.zero.xyz/host/css-design-calc.x402tookit.com/llms.txt)