CSS Box Model
The CSS Box Model explains how every element is a box with content, padding, border, and margin. This is a foundational concept in styling and visual design that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world CSS experience. Take your time with each section and practice the examples
25 min•By Priygop Team•Last updated: Feb 2026
The CSS Box Model
Every HTML element is treated as a rectangular box. The box model has 4 layers: Content (the actual text/image), Padding (space inside the border), Border (the outline around the element), and Margin (space outside the border). Understanding the box model is essential for controlling layout.
Box Model Properties
- width / height — Size of the content area
- padding — Space between content and border (inside)
- border — The visible outline (width, style, color)
- margin — Space outside the border (between elements)
- box-sizing: border-box — Makes width include padding and border
- padding: 10px 20px — Top/bottom 10px, left/right 20px
- margin: auto — Centers a block element horizontally
Box Model Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 3px solid #04AA6D;
margin: 15px;
background-color: #e8f5e9;
}
.box2 {
width: 200px;
padding: 10px 20px;
border: 2px dashed #e44d26;
margin: 15px auto;
background-color: #fff3e0;
text-align: center;
}
</style>
</head>
<body>
<div class="box">Content with padding, border, and margin.</div>
<div class="box2">Centered box with dashed border.</div>
</body>
</html>Try It Yourself: Box Model
Try It Yourself: Box ModelCSS
CSS Editor
✓ ValidTab = 2 spaces
CSS|35 lines|667 chars|✓ Valid syntax
UTF-8