Skip to content
Toolspire

CSS Tools

CSS Box Model Calculator

CSS Box Model Calculator is part of Toolspire and is ready as soon as this page loads. Both sides count. Padding 10 adds 20 to the width. Border 2 adds 4. Margin is outside the border and is not part of this size.

Runs in this tabFreeNo account

On this page

What you can do here

Four sides, two axes

One padding number is applied on every side. Top and bottom both add to the height.

The 124 check

100, padding 10, border 2.

content-box, named

If your rule says border-box, do not add these extras. The outer size is already the content box you typed.

The sequence

How to use the CSS Box Model Calculator

  1. 1

    Measure the content box

    That is the width property under content-box, not the size you see including padding.

  2. 2

    Use one padding if all sides match

    If left and right differ, this single number does not describe them.

  3. 3

    Check 124 by 74

    The sample. A result of 112 forgot the border.

Worth knowing

  • CSS Box Model Calculator on Toolspire: total width = content + 2 × padding + 2 × border.
  • 100 + 20 + 4 = 124. Height 50 + 20 + 4 = 74.
  • This is content-box, the CSS default. border-box would keep 100 as the outer width.
  • Margin is not included. It sits outside the border.

The default box adds outward

Under content-box, the width property is the content. Padding and border grow the border box beyond it. Ten pixels of padding on the left and ten on the right add twenty. A two-pixel border on both sides adds four. 100 + 20 + 4 is 124, and the same arithmetic on a height of 50 is 74. Margin would push neighbours away and is not part of the border box, so it is left out.

FAQ

Questions about CSS Box Model Calculator

Where does CSS Box Model Calculator run?

CSS Box Model Calculator runs in this tab on Toolspire. What you type or drop in is not sent to us and is not stored on a server.

What is the border-box size of 100×50 with padding 10 and border 2?

124 by 74. That is the outer border edge under content-box.

Why not 120?

Padding alone is 20. The border adds another 4.

What if I use border-box?

The width you set is already the outer width. Do not add padding and border again.

Where is margin?

Outside this sum. It does not change the border box.

Keep going

Related tools

CSS Border Radius GeneratorNewCSS Border Radius Generator on Toolspire: Write a border-radius declaration from four corners, and collapse it to one value when every corner matches.CSS ToolsCSS Clamp CalculatorNewBuild a CSS clamp() for a size that scales between two viewports, with a minimum and a maximum in pixels. The maths stays on your device.CSS ToolsPX to REM ConverterNewPX to REM Converter on Toolspire. Convert pixels to rem and rem back to pixels using your root font size. No account is required.CSS ToolsCSS Glassmorphism GeneratorNewCSS Glassmorphism Generator on Toolspire: Glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live.CSS ToolsCSS Neumorphism GeneratorNewCSS Neumorphism Generator on Toolspire: Neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states.CSS ToolsBento Grid GeneratorNewBento Grid Generator on Toolspire: Draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.CSS Tools

Open the full directory

Last updated Report a problem or suggest a feature