{"uid":"cap_wdhRoRr45hKyiPBdhC0Ut","slug":"css-design-calc-box-model-size-calculator-68e3c1a4","name":"CSS Design Calc – Box Model Size Calculator","description":"CSS box model sizes: content, padding, border and margin boxes from a width and height under content-box or border-box.","url":"https://css-design-calc.x402tookit.com/box-size?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"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":["null","number"]},"borderBoxWidth":{"type":["null","number"]},"marginBoxWidth":{"type":["null","number"]},"borderBoxHeight":{"type":["null","number"]},"marginBoxHeight":{"type":["null","number"]},"paddingBoxWidth":{"type":["null","number"]},"paddingBoxHeight":{"type":["null","number"]},"widthToSetForBorderBox":{"type":["null","number"]},"widthToSetForContentBox":{"type":["null","number"]}}}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.02","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.02/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_SJU0lgQksY5GSFW3dvgu0","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.02","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"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","exampleAgentPrompt":"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.","exampleUseCases":[{"title":"Verify actual rendered element size","prompt":"I have a CSS element set to 480px wide in border-box mode with 20px padding and 1px border on each side — what will its content area and total margin box dimensions be?"},{"title":"Convert content-box to border-box width","prompt":"If I want a 600px content area with 24px padding and 2px border on each side, what width do I need to set if I switch to border-box sizing?"},{"title":"Debug layout with margin and padding layers","prompt":"Can you break down all the box model layers for a 250px square element using content-box sizing, with 12px padding, 3px border, and 16px margin on each side? I need content, padding, border, and margin box sizes."}],"resultDescription":"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.","failureModes":["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"],"whenToPreferThis":"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.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-30T06:37:48.053Z","isFirstParty":false,"canonicalSlug":"css-design-calc-box-model-size-calculator-68e3c1a4"}