Box Model Basics

🎨 CSS3+ 🟢 Chapter 13 of 49 📂 Phase 05: Box Model 📅 2026 Edition

📌 Covered in this chapter: Content · Padding · Border · Margin · Width · Height · box-sizing · content-box · border-box · Margin Collapse · Debugging · Overflow Basics

Welcome to Chapter 13: Box Model Basics — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.

1CSS Box Model Ante Enti?

Every HTML element rectangular box. Box model four layers:

┌────────────── margin ──────────────┐ │ ┌─────────── border ───────────┐ │ │ │ ┌──────── padding ────────┐ │ │ │ │ │ ┌──── content ────┐ │ │ │ │ │ │ │ text / image │ │ │ │ │ │ │ └─────────────────┘ │ │ │ │ │ └─────────────────────────┘ │ │ │ └────────────────────────────────┘ │ └──────────────────────────────────────┘

2Box Model Example

CSS▶ Try in Editor

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  margin: 20px;
  box-sizing: border-box;
}

3box-sizing — content-box vs border-box

Value	Width includes
`content-box` (default)	Content only — padding & border add avuthayi
`border-box`	Content + padding + border — total width fixed

CSS — Global Reset

*, *::before, *::after {
  box-sizing: border-box;
}

4Margin Collapse & Debugging

Margin collapse: Adjacent vertical margins merge avuthayi — larger margin win avuthundi. Padding or border unte collapse avvadu.

DevTools lo box model diagram chusi content, padding, border, margin sizes verify cheyandi.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026