CSS Box Model
The CSS Box Model is a fundamental concept that describes how elements are rendered on a web page. Every HTML element is treated as a rectangular box with content, padding, border, and margin areas.
Understanding the box model is crucial for creating accurate layouts and controlling the spacing between elements.
In this tutorial
1Box Model Explained
In CSS, the box model consists of four layers that make up an element's dimensions:
The CSS Box Model:
Margin
Border
Padding
Content
- Content: The actual content of the element (text, images, etc.)
- Padding: Space between the content and the border
- Border: Outline that surrounds the padding
- Margin: Space outside the border, separating the element from others
Total element width = content width + left padding + right padding + left border + right border + left margin + right margin
Total element height = content height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Developer Tools:
All modern browsers include Developer Tools that provide visual box model diagrams. Right-click an element and select "Inspect" to see its box model visualization.
2Width and Height
The width and height properties control the size of an element's content area. There are several ways to define these dimensions.
/* Width and Height Properties */
/* Fixed values */
.box-1 {
width: 300px;
height: 200px;
}
/* Percentage (relative to parent) */
.box-2 {
width: 50%;
height: 50%;
}
/* Minimum and maximum dimensions */
.box-3 {
min-width: 200px;
max-width: 800px;
min-height: 100px;
max-height: 400px;
}
/* Viewport-relative units */
.box-4 {
width: 50vw; /* 50% of viewport width */
height: 50vh; /* 50% of viewport height */
}
/* Setting width to fill available space */
.box-5 {
width: 100%; /* 100% of parent width */
}
/* Auto dimensions (content-based) */
.box-6 {
width: auto;
height: auto;
}Width & Height Units:
px- Pixels (fixed unit)%- Percentage of parent elementem- Relative to element's font sizerem- Relative to root font sizevw/vh- Percentage of viewport width/heightauto- Browser calculates based on content
Important Notes:
- Block-level elements naturally expand to fill width
- Inline elements ignore width/height properties
- Use min/max properties for responsive designs
- Overflow occurs when content exceeds dimensions
- Percentage heights require parent with defined height
Width and Height Examples:
3Padding
Padding is the space between an element's content and its border. It creates internal spacing and can be set for individual sides or all sides at once.
/* Padding Properties */
/* All sides equally */
.box-1 {
padding: 20px;
}
/* Vertical, Horizontal */
.box-2 {
padding: 10px 20px; /* 10px top/bottom, 20px left/right */
}
/* Top, Horizontal, Bottom */
.box-3 {
padding: 10px 20px 15px; /* 10px top, 20px left/right, 15px bottom */
}
/* Top, Right, Bottom, Left (clockwise) */
.box-4 {
padding: 10px 20px 15px 5px; /* 10px top, 20px right, 15px bottom, 5px left */
}
/* Individual sides */
.box-5 {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;
}Padding Visualization:
padding: 5px
padding: 20px
padding: 10px 20px
Padding Notes:
- Padding adds to the element's dimensions in the standard box model
- Padding cannot have negative values
- Padding values can use any valid CSS unit (px, em, %, etc.)
- Padding is included in the clickable area of an element
4Border
Borders add visible lines around an element. They sit between the padding and margin, and have properties for width, style, and color.
/* Border Properties */
/* Shorthand for all sides */
.box-1 {
border: 1px solid #000; /* width, style, color */
}
/* Individual sides */
.box-2 {
border-top: 2px dashed #3498db;
border-right: 3px dotted #2ecc71;
border-bottom: 4px solid #e74c3c;
border-left: 5px double #9b59b6;
}
/* Individual properties */
.box-3 {
border-width: 2px;
border-style: solid;
border-color: #3498db;
}
/* More specific properties */
.box-4 {
border-top-width: 1px;
border-right-style: dashed;
border-bottom-color: #e74c3c;
}
/* Rounded corners */
.box-5 {
border: 1px solid #3498db;
border-radius: 8px; /* all corners equally */
}
.box-6 {
border: 1px solid #3498db;
border-radius: 8px 4px 12px 2px; /* top-left, top-right, bottom-right, bottom-left */
}
/* Circle */
.circle {
border: 2px solid #3498db;
border-radius: 50%; /* creates a circle if width and height are equal */
}Border Styles:
Solid line
Dashed line
Dotted line
Double line
3D grooved effect
3D ridged effect
3D inset effect
3D outset effect
No border
Border Radius Examples:
4px
8px
16px
50%
5Margin
Margin is the space outside an element's border. It creates separation between elements and can be set for individual sides or all sides at once.
/* Margin Properties */
/* All sides equally */
.box-1 {
margin: 20px;
}
/* Vertical, Horizontal */
.box-2 {
margin: 10px 20px; /* 10px top/bottom, 20px left/right */
}
/* Top, Horizontal, Bottom */
.box-3 {
margin: 10px 20px 15px; /* 10px top, 20px left/right, 15px bottom */
}
/* Top, Right, Bottom, Left (clockwise) */
.box-4 {
margin: 10px 20px 15px 5px; /* 10px top, 20px right, 15px bottom, 5px left */
}
/* Individual sides */
.box-5 {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;
}
/* Auto margins for centering */
.centered {
width: 300px;
margin: 0 auto; /* Horizontal centering */
}
/* Negative margins */
.overlap {
margin-top: -20px; /* Pulls element up */
}Margin Examples:
Element with margin: 20px
Element with margin: 10px 30px
Margin Collapse:
Vertical margins between adjacent elements can "collapse" into each other, meaning only the larger margin is used.
.element-1 {
margin-bottom: 20px;
}
.element-2 {
margin-top: 15px;
}
/* The space between will be 20px, not 35px */Margin collapse only occurs with vertical margins, not horizontal ones.
6Box Sizing
The box-sizing property determines how the width and height of an element are calculated. It has two main values: content-box (default) and border-box.
/* Box Sizing Property */
/* Default CSS box model (content-box) */
.default-box {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 10px solid #3498db;
/* Total width = 300px + 40px padding + 20px border = 360px */
}
/* Alternative box model (border-box) */
.alternative-box {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 10px solid #3498db;
/* Total width = 300px (content adjusts to fit padding and border) */
}
/* Common reset to use border-box for all elements */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}Box Sizing Comparison:
content-box (Default)
Total width = content width + padding + border
border-box
Total width = set width (padding and border inside)
Why Use border-box?
- Makes it easier to size elements accurately
- No need to calculate padding and border in dimensions
- Prevents unexpected layout shifts when adding borders/padding
- Industry standard for modern CSS development
- Works better with responsive design patterns
7Try It Yourself
Experiment with the box model properties by styling the HTML elements below. Try adjusting dimensions, padding, border, and margin to see how they affect the layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model Practice</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>CSS Box Model</h1>
<div class="demo-section">
<h2>Content Box vs Border Box</h2>
<div class="box-container">
<div class="box content-box">
<h3>content-box</h3>
<p>Width: 200px</p>
<p>Padding: 20px</p>
<p>Border: 5px</p>
<p>Total: 250px</p>
</div>
<div class="box border-box">
<h3>border-box</h3>
<p>Width: 200px</p>
<p>Padding: 20px</p>
<p>Border: 5px</p>
<p>Total: 200px</p>
</div>
</div>
</div>
<div class="demo-section">
<h2>Margin and Padding</h2>
<div class="box-container spacing-demo">
<div class="box-outer">
<p class="label">Margin</p>
<div class="box-middle">
<p class="label">Border</p>
<div class="box-inner">
<p class="label">Padding</p>
<div class="content">
<p>Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="demo-section">
<h2>Card Examples</h2>
<div class="card-container">
<div class="card">
<div class="card-image"></div>
<div class="card-content">
<h3>Card Title</h3>
<p>This card demonstrates the box model with realistic styling.</p>
<button>Learn More</button>
</div>
</div>
<div class="card card-alt">
<div class="card-image"></div>
<div class="card-content">
<h3>Card Title</h3>
<p>This card has different box model properties.</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>/* Base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f8f8;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #3498db;
color: #2c3e50;
}
.demo-section {
margin-bottom: 40px;
}
h2 {
margin-bottom: 15px;
color: #2c3e50;
}
/* Content Box vs Border Box Demo */
.box-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.box {
width: 200px;
padding: 20px;
border: 5px solid #3498db;
background-color: #ecf0f1;
text-align: center;
}
.content-box {
box-sizing: content-box;
background-color: #d6eaf8;
}
.border-box {
box-sizing: border-box;
background-color: #d1f2eb;
}
/* Margin and Padding Demo */
.spacing-demo {
margin-top: 30px;
}
.box-outer {
background-color: #f1f1f1;
padding: 30px;
border: 2px dashed #bdc3c7;
position: relative;
}
.box-middle {
background-color: #e8f4fc;
border: 5px solid #3498db;
padding: 30px;
position: relative;
}
.box-inner {
background-color: #d6eaf8;
padding: 20px;
position: relative;
}
.content {
background-color: #3498db;
color: white;
padding: 15px;
text-align: center;
}
.label {
position: absolute;
top: 5px;
left: 10px;
font-size: 12px;
color: #7f8c8d;
background-color: rgba(255, 255, 255, 0.7);
padding: 2px 5px;
border-radius: 3px;
}
/* Card Examples */
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
width: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card-image {
height: 150px;
background-color: #3498db;
background-image: linear-gradient(45deg, #3498db, #2980b9);
}
.card-content {
padding: 15px;
}
.card-content h3 {
margin-bottom: 10px;
color: #2c3e50;
}
.card-content p {
margin-bottom: 15px;
color: #7f8c8d;
}
.card-content button {
background-color: #3498db;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
}
.card-alt {
border: 2px solid #3498db;
box-shadow: none;
}
.card-alt .card-content {
padding: 20px;
}
.card-alt button {
background-color: white;
color: #3498db;
border: 2px solid #3498db;
}Pro Tip:
When working with the box model, use your browser's Developer Tools to inspect elements. The box model visualization shows the exact dimensions of content, padding, border, and margin, making it easier to debug layout issues.
Summary
- ✓The CSS Box Model consists of content, padding, border, and margin
- ✓Width and height properties control the content area dimensions
- ✓Padding adds space inside the border, while margin adds space outside
- ✓Border sits between padding and margin and can be styled in various ways
- ✓Box-sizing: border-box makes width and height include padding and border