Introduction
The CSS box model is the foundation of all web layouts. Every HTML element is essentially a rectangular box, and understanding how these boxes work is crucial for mastering CSS layout. This tutorial covers the box model components, display properties, and layout fundamentals that every web developer needs to know.
The CSS Box Model
Box Model Components
Every element consists of four main areas: content, padding, border, and margin.
css
/* Visual representation of the box model */
.box-example {
/* Content area */
width: 200px;
height: 100px;
/* Padding - space inside the element */
padding: 20px;
/* Border - visible boundary */
border: 2px solid #333;
/* Margin - space outside the element */
margin: 10px;
background-color: lightblue;
}
/* Total element size calculation (default box-sizing) */
/* Width: 200px (content) + 40px (padding) + 4px (border) = 244px */
/* Height: 100px (content) + 40px (padding) + 4px (border) = 144px */
Box-Sizing Property
css
/* Default: content-box */
.content-box {
box-sizing: content-box; /* Default value */
width: 200px;
padding: 20px;
border: 2px solid black;
/* Total width: 200 + 20 + 20 + 2 + 2 = 244px */
}
/* Better: border-box */
.border-box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid black;
/* Total width: 200px (includes padding and border) */
}
/* Global border-box (recommended) */
*, *::before, *::after {
box-sizing: border-box;
}
Margin and Padding Shorthand
css
/* Margin shorthand syntax */
.margin-examples {
/* All sides */
margin: 20px;
/* Vertical | Horizontal */
margin: 10px 20px;
/* Top | Horizontal | Bottom */
margin: 10px 20px 15px;
/* Top | Right | Bottom | Left */
margin: 10px 15px 20px 5px;
/* Individual sides */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 5px;
}
/* Same syntax applies to padding */
.padding-examples {
padding: 1rem 2rem;
padding-inline: 1rem; /* Left and right */
padding-block: 0.5rem; /* Top and bottom */
}
Display Property Fundamentals
Block vs Inline vs Inline-Block
css
/* Block elements */
.block-element {
display: block;
width: 100%; /* Takes full width */
height: 50px; /* Height can be set */
margin: 10px 0; /* Vertical margins work */
background-color: lightblue;
}
/* Inline elements */
.inline-element {
display: inline;
/* width: 100px; Width/height ignored */
/* height: 50px; Width/height ignored */
padding: 5px 10px; /* Horizontal padding works */
margin: 0 10px; /* Only horizontal margins */
background-color: yellow;
}
/* Inline-block elements */
.inline-block-element {
display: inline-block;
width: 150px; /* Width/height respected */
height: 50px;
margin: 10px; /* All margins work */
padding: 10px;
background-color: lightgreen;
vertical-align: top; /* Can be aligned vertically */
}
/* None - removes element from document flow */
.hidden {
display: none; /* Element not rendered */
}
Modern Layout Methods
css
/* Flexbox container */
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
/* Grid container */
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 1rem;
}
/* Table display (for legacy support) */
.table-layout {
display: table;
width: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
padding: 10px;
border: 1px solid #ccc;
}
Layout Flow and Positioning Context
Normal Document Flow
css
/* Block elements stack vertically */
.article {
margin-bottom: 2rem;
padding: 1rem;
background-color: #f5f5f5;
}
/* Inline elements flow horizontally */
.tag {
display: inline;
background-color: #e0e0e0;
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
border-radius: 3px;
}
/* Clear floats (legacy but still useful) */
.clearfix::after {
content: "";
display: table;
clear: both;
}
Width and Height Behavior
css
/* Auto width behavior */
.auto-width {
width: auto; /* Default - fills container */
max-width: 600px; /* Prevents overflowing */
margin: 0 auto; /* Center horizontally */
}
/* Min and max constraints */
.responsive-container {
width: 100%;
min-width: 300px; /* Never smaller than 300px */
max-width: 1200px; /* Never larger than 1200px */
min-height: 400px; /* Minimum height */
}
/* Height considerations */
.full-height {
height: 100vh; /* Full viewport height */
min-height: 100%; /* At least full height */
}
/* Aspect ratio (modern browsers) */
.aspect-ratio {
aspect-ratio: 16/9;
width: 100%;
}
Margin Collapse
Understanding Margin Collapse
css
/* Vertical margin collapse example */
.section {
margin-bottom: 30px;
}
.section + .section {
margin-top: 20px;
/* Actual gap will be 30px (larger margin wins) */
}
/* Preventing margin collapse */
.no-collapse {
padding-top: 1px; /* Or border-top: 1px solid transparent */
}
/* Parent-child margin collapse */
.parent {
/* margin-top: 20px; This would collapse with child */
padding-top: 1px; /* Prevents collapse */
background-color: lightgray;
}
.child {
margin-top: 20px; /* Won't collapse with parent now */
background-color: white;
}
Overflow and Content Handling
css
/* Overflow control */
.overflow-examples {
width: 200px;
height: 100px;
border: 1px solid black;
}
.overflow-visible {
overflow: visible; /* Default - content overflows */
}
.overflow-hidden {
overflow: hidden; /* Clips overflowing content */
}
.overflow-scroll {
overflow: scroll; /* Always shows scrollbars */
}
.overflow-auto {
overflow: auto; /* Scrollbars only when needed */
}
/* Text overflow */
.text-overflow {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Shows "..." */
}
Layout Patterns with Box Model
Centered Content
css
/* Center block element */
.center-block {
width: 600px;
margin: 0 auto;
}
/* Center with flexbox */
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Center with grid */
.center-grid {
display: grid;
place-items: center;
min-height: 100vh;
}
Equal Height Columns
css
/* Flexbox equal height */
.equal-height-flex {
display: flex;
gap: 1rem;
}
.column {
flex: 1;
background-color: #f0f0f0;
padding: 1rem;
}
/* Grid equal height */
.equal-height-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
Common Layout Issues and Solutions
css
/* Issue: Box model calculations */
.fixed-width-issue {
width: 300px;
padding: 20px; /* Makes total width 340px */
border: 5px solid black; /* Makes total width 350px */
}
/* Solution: Use border-box */
.fixed-width-solution {
box-sizing: border-box;
width: 300px; /* Total width stays 300px */
padding: 20px;
border: 5px solid black;
}
/* Issue: Inline element styling limitations */
.inline-issue {
display: inline;
width: 200px; /* Ignored */
height: 100px; /* Ignored */
margin-top: 20px; /* Ignored */
}
/* Solution: Use inline-block or block */
.inline-solution {
display: inline-block;
width: 200px; /* Works */
height: 100px; /* Works */
margin-top: 20px; /* Works */
vertical-align: top;
}
Conclusion
The CSS box model is fundamental to understanding how layouts work in CSS. Master these concepts - content, padding, border, margin, and display properties - and you'll have a solid foundation for creating any layout. Remember to use box-sizing: border-box for more predictable sizing, and always consider how margin collapse affects your vertical spacing.
These fundamentals prepare you for advanced layout techniques like Flexbox and Grid, which we'll explore in future tutorials.