📦 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

Layer	Description	Property Example
Content	Actual text or image inside the box	width: 200px; height: 100px;
Padding	Space between content and border	padding: 10px;
Border	Outline around the padding	border: 2px solid black;
Margin	Space outside the border	margin: 20px;

🧍 Margin Properties

Margin defines outer space around an element — separates elements.

Property	Description	Example
margin-top	Space above	margin-top: 10px
margin-right	Space to the right	margin-right: 20px
margin-bottom	Space below	margin-bottom: 15px
margin-left	Space to the left	margin-left: 5px

✅ Shorthand

Syntax	Meaning
margin: 10px	All sides same
margin: 10px 20px	Top/Bottom → 10px, Left/Right → 20px
margin: 10px 15px 20px	Top, Left/Right, Bottom
margin: 5px 10px 15px 20px	Top, Right, Bottom, Left

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.

Property	Description	Example
border-width	Thickness	border-width: 4px
border-style	Line type (solid, dotted, dashed, double, groove, ridge)	border-style: solid
border-color	Border color	border-color: red
border-radius	Rounded corners	border-radius: 10px

✅ 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.

Property	Corner	Example
border-top-left-radius	Top-left corner	border-top-left-radius: 20px;
border-top-right-radius	Top-right corner	border-top-right-radius: 30px;
border-bottom-right-radius	Bottom-right corner	border-bottom-right-radius: 10px;
border-bottom-left-radius	Bottom-left corner	border-bottom-left-radius: 40px;

✅ Shorthand Syntax

Syntax	Meaning
border-radius: 10px;	All corners same
border-radius: 10px 20px;	Top-left/Bottom-right → 10px, Top-right/Bottom-left → 20px
border-radius: 10px 20px 30px 40px;	Top-left, Top-right, Bottom-right, Bottom-left

🧩 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.

Property	Description	Example
padding-top	Space at top	padding-top: 10px
padding-right	Space at right	padding-right: 20px
padding-bottom	Space at bottom	padding-bottom: 15px
padding-left	Space at left	padding-left: 5px

✅ Shorthand Forms Same rules as margin:

🌈 Box Sizing

By default, total box size = content + padding + border ```css

.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

Type	Description	Example
Basic Shadow	Normal outer shadow	0 4px 10px rgba(0,0,0,0.3)
Dark Strong Shadow	Deep shadow for floating effect	0 10px 25px rgba(0,0,0,0.5)
Inset Shadow	Shadow inside the box	inset 0 0 15px rgba(0,0,0,0.4)
Multiple Shadows	Two or more shadows	0 0 10px red, 0 0 20px blue
Soft Card Shadow	UI cards, modern design	0 8px 20px rgba(0,0,0,0.15)

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;
}

← Previous Next →