Home CSS Reference box-sizing

box-sizing

property

Defines how the total width and height of an element is calculated. border-box includes padding and border.

Syntax

box-sizing: content-box | border-box;

Example

css

/* Apply to all elements (recommended reset) */
*, *::before, *::after {
    box-sizing: border-box;
}

/* content-box (default): width = content only */
.box-a {
    width: 200px;
    padding: 20px;
    border: 5px solid #333;
    box-sizing: content-box; /* actual width: 250px */
}

/* border-box: width includes padding + border */
.box-b {
    width: 200px;
    padding: 20px;
    border: 5px solid #333;
    box-sizing: border-box; /* actual width: 200px */
}

margin