CSS Box Model & Box Sizing Cheat Sheet

Box Model Components

Property Description
content The actual content (text, images)
padding Space between content and border
border Border around the padding
margin Space outside the border
Example Box
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid;
    margin: 10px;
}

Box Sizing

content-box (default)

Content Box

Total width = width + padding + border

.content-box {
    box-sizing: content-box;
    width: 200px;  /* Final width: 250px */
    padding: 20px;
    border: 5px solid;
}

border-box

Border Box

Total width = width (includes padding & border)

.border-box {
    box-sizing: border-box;
    width: 200px;  /* Final width: 200px */
    padding: 20px;
    border: 5px solid;
}

Common Properties

Property Values Description
padding px, em, rem, % padding: 10px; or padding: 10px 20px;
margin px, em, rem, %, auto margin: auto; or margin: 10px 20px;
border width style color border: 1px solid black;
box-sizing content-box, border-box Defines how width and height are calculated