CSS Box Model Calculator

Calculate content, padding, border, margin and rendered CSS box sizes.

Width Height Padding Border Margin

372 px

border-box width

232 px

border-box height

404 px

outer width

.box {
  box-sizing: content-box;
  width: 320px;
  height: 180px;
  padding: 24px;
  border: 2px solid currentColor;
  margin: 16px;
}

/* border-box: 372px x 232px */

About this tool

Calculate content, padding, border, margin and rendered CSS box sizes.