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;
}

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

Total width = width (includes padding & border)

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

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