CSS Box Model

CSS Tutorial

⭐ CSS Box Model

Every HTML element is treated as a box, made of 4 layers:

+-------------------------+
| Margin (outside) |
| +-------------------+ |
| | Border | |
| | +---------------+ | |
| | | Padding | | |
| | | +-----------+ | | |
| | | | Content | | | |
| | | +-----------+ | | |
| | +---------------+ | |
| +-------------------+ |
+-------------------------+

🔹 1. Content

The actual text or image inside the box.


🔹 2. Padding

Space inside the box — between content and border.


🔹 3. Border

Line around the padding.


🔹 4. Margin

Space outside the border — pushes elements away from each other.


⭐ Example (Full Box Model)


🧮 Total Size Calculation (Default)

Total Width =

 

Total Height = same formula.

⭐ box-sizing: border-box (Important)

Makes width & height include padding and border.


This prevents the element from becoming bigger than expected.

You may also like...