CSS Box Model
What is the Box Model?
Every HTML element is treated as a rectangular box. The CSS Box Model describes the space an element occupies, consisting of four layers from inside to outside:
- Content — the actual text, image, or other content
- Padding — transparent space between content and border
- Border — a line surrounding the padding
- Margin — transparent space outside the border, separating elements
.box {
/* Content */
width: 300px;
height: 150px;
/* Padding — inside the border */
padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom left/right */
padding: 10px 20px 15px; /* top left/right bottom */
padding: 10px 20px 15px 5px; /* top right bottom left (clockwise) */
/* Border */
border: 2px solid #3498db;
border-width: 2px;
border-style: solid; /* solid | dashed | dotted | double | none */
border-color: #3498db;
border-radius: 8px; /* rounded corners */
/* Individual sides */
border-top: 3px solid red;
border-right: 1px dashed gray;
border-bottom: 2px solid blue;
border-left: none;
/* Margin — outside the border */
margin: 20px; /* all sides */
margin: 10px auto; /* center horizontally */
margin-top: 30px;
/* Negative margins are valid */
margin-top: -10px; /* pulls element up */
}
/* Total width = 300 + 20+20 (padding) + 2+2 (border) = 344px */
/* Margin collapse — vertical margins between siblings collapse */
/* to the larger of the two values, not their sum */
p { margin-bottom: 20px; }
h2 { margin-top: 30px; }
/* Gap between h2 and p = 30px (not 50px) */box-sizing Property
By default (content-box), padding and border are added to the specified width. With border-box, padding and border are included in the width — making layout much more predictable.
/* content-box (default) — padding/border ADDED to width */
.content-box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 2px solid black;
/* Actual rendered width = 200 + 40 + 4 = 244px */
}
/* border-box — padding/border INCLUDED in width */
.border-box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid black;
/* Actual rendered width = 200px (content = 200-40-4 = 156px) */
}
/* Best practice — apply border-box globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 50% means exactly 50% of parent, regardless of padding */
.column {
width: 50%;
padding: 20px; /* doesn't break the 50% layout */
}