CSS Box Model
What is CSS Box Model?
The CSS Box Model is a concept that describes how every HTML element is displayed as a rectangular box on a webpage. Each element consists of four main parts: Content, Padding, Border, and Margin. Understanding the box model is essential for creating accurate layouts and controlling spacing between elements.
Parts of CSS Box Model
Why Use CSS Box Model?
The CSS Box Model helps developers understand how space is calculated around elements. It is used when designing cards, buttons, layouts, navigation bars, forms, and responsive webpages. Without understanding the box model, elements may appear incorrectly sized or misplaced.
Basic CSS Box Model Syntax
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:200px;
padding:20px;
border:5px solid blue;
margin:30px;
}
</style>
</head>
<body>
<div class="box">
CSS Box Model Example
</div>
</body>
</html>Step 1: Understanding Content Area
The content area is the actual information inside an element. It can contain text, images, videos, or other HTML elements. The width and height properties control the size of this area.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:300px;
height:100px;
background:#007BFF;
color:white;
}
</style>
</head>
<body>
<div class="box">
This is the Content Area
</div>
</body>
</html>Step 2: Adding Padding
Padding creates space inside an element between the content and the border. Increasing padding makes the content move away from the border.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:300px;
padding:30px;
background:#28a745;
color:white;
}
</style>
</head>
<body>
<div class="box">
Content with Padding Space
</div>
</body>
</html>Step 3: Adding Border
Borders create a visible line around an element. You can control the border width, style, and color using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:300px;
padding:20px;
border:5px solid red;
}
</style>
</head>
<body>
<div class="box">
Box With Border
</div>
</body>
</html>Step 4: Adding Margin
Margin creates space outside an element. It separates one element from other elements around it.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:250px;
padding:20px;
border:3px solid blue;
margin:50px;
}
</style>
</head>
<body>
<div class="box">
Box With Margin
</div>
</body>
</html>Step 5: Complete CSS Box Model Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:Arial;
background:#f5f9ff;
}
.card{
width:300px;
padding:25px;
border:3px solid #007BFF;
margin:40px;
background:white;
border-radius:10px;
}
button{
padding:10px 20px;
margin-top:15px;
border:none;
background:#007BFF;
color:white;
}
</style>
</head>
<body>
<div class="card">
<h2>CSS Box Model</h2>
<p>
Content, Padding, Border and Margin together create a box.
</p>
<button>
Learn More
</button>
</div>
</body>
</html>Box Model Calculation
By default, the total size of an element includes content size, padding, and border. Margin is added outside the element.
<style>
.box{
width:200px;
padding:20px;
border:5px solid black;
}
/*
Total Width Calculation:
Content Width = 200px
Left Padding + Right Padding = 40px
Left Border + Right Border = 10px
Total Width = 250px
*/
</style>Using box-sizing Property
The box-sizing property controls how width and height are calculated. Using border-box includes padding and border inside the defined size.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:300px;
padding:30px;
border:5px solid black;
box-sizing:border-box;
background:#ffc107;
}
</style>
</head>
<body>
<div class="box">
Border Box Example
</div>
</body>
</html>Advantages of CSS Box Model
Best Practices
- Understand content, padding, border, and margin clearly.
- Use box-sizing:border-box for modern layouts.
- Use padding for internal spacing.
- Use margin for spacing between elements.
- Avoid unnecessary large spacing values.
- Use consistent spacing throughout your website.
- Test layouts on different screen sizes.
- Combine Box Model with Flexbox and Grid for advanced layouts.
Web Resources on CSS Box Model
1. MDN Web Docs : Introduction to the CSS box model
2. MDN Web Docs : CSS box model
3. MDN Web Docs : The box model
4. Dev.to : Learn CSS BOX MODEL
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.