📦 CSS Box Model
Last Updated: November 2025
The CSS Box Model defines how every HTML element is structured and spaced.
Every element is treated as a rectangular box made up of 4 layers:
🗣 Hinglish Tip: Har element ek box hota hai — andar se content, phir padding, border aur sabse bahar margin.
Box Model Layers Overview
🧍 Margin Properties
Margin defines outer space around an element — separates elements.
Shorthand
margin: 10px 20px;
💡 You can also use auto to center a block horizontally:
margin: 0 auto;
🗣 Hinglish Tip: auto se element horizontally center ho jata hai — especially fixed width wale div ke liye.
🧊 Border Properties
Border is the line around padding and content.
Shorthand
border: 3px solid green;
Each Side
border-top: 2px solid red;
border-right: 4px dashed blue;
border-bottom: 3px dotted orange;
border-left: 1px solid gray;
Border Radius (Rounded Corners)
border-radius helps you curve or round the corners of a box.
You can control each corner separately or use shorthand for all.
Shorthand Syntax
Example
<!DOCTYPE html>
<html>
<head>
<style>
.rounded-box {
width: 200px;
height: 120px;
background-color: lightcoral;
border: 3px solid #333;
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 30px;
}
</style>
</head>
<body>
<div class="rounded-box"></div>
</body>
</html>
Padding Properties Padding gives inner space between content and border.
Shorthand Forms Same rules as margin:
🌈 Box Sizing
By default, total box size = content + padding + border.
.box {
box-sizing: content-box; /* Default */
}
If you set:
box-sizing: border-box;
👉 Then width includes padding + border, making layout easier.
🗣 Hinglish Tip: border-box ka matlab — jo width set kiya wahi final size hoga, extra space add nahi hoga.
Total Element Size Formula
If box-sizing: content-box;
Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
Total Height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
If box-sizing: border-box; → Padding and border included in width & height.
Example: Compare Box Sizing
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
padding: 20px;
border: 5px solid blue;
margin: 10px;
}
.box1 {
box-sizing: content-box;
background-color: lightcoral;
}
.box2 {
box-sizing: border-box;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="box1">content-box</div>
<div class="box2">border-box</div>
</body>
</html>
💡 Notice: Both boxes have same width in CSS, but actual visible width differs.
Box Shadow
Syntax
selector {
box-shadow: offset-x offset-y blur spread color;
}
- offset-x → Left/Right movement
- offset-y → Up/Down movement
- blur → Shadow ka softness
- spread → Shadow kitna bada
- color → Shadow ka color
🗣 Hinglish Tip: Zyada blur = soft shadow Zyada spread = big shadow
Example
/* Basic Shadow */
.box {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
/* Soft Card Shadow */
.card {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
/* Inset Shadow (Inside the Box) */
.inset-box {
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
}
/* Hard Dark Shadow */
.dark {
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.6);
}
/* Multiple Shadows */
.multi {
box-shadow:
0 0 10px red,
0 0 20px blue;
}
