CSS Box Model

Introduction

The CSS Box Model is one of the most important concepts in CSS. If you do not understand the box model properly, layouts will feel confusing and unpredictable. Almost every layout issue beginners face—extra spacing, misaligned elements, overflow problems—comes back to misunderstanding the box model.

In this chapter, you will learn:

• What the CSS box model is
• All its parts in detail
• How spacing actually works in CSS
• Common mistakes and how to avoid them
• Real-world layout examples

Once you understand this chapter well, layout-related topics like Flexbox and Grid will become much easier.

What is the CSS Box Model?

In CSS, every HTML element is treated as a rectangular box.

This box is made up of four layers (from inside to outside):

Every element on a webpage—text, images, buttons, divs—follows this model.

1. Content

The content area is where the actual content lives (Text, Images, Videos, Icons).

.box {
  width: 300px;
  height: 150px;
}

Important: Width and height apply only to the content, not padding or border (by default).

2. Padding

Padding is the space between the content and the border.

.box {
  padding: 20px;
}

This adds space inside the box, making content breathe.

padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;

padding: 10px 15px;

3. Border

The border surrounds padding and content.

.box {
  border: 1px solid #ccc;
}

Border parts: Width, Style, Color.

Border Radius (Rounded Corners)

.card {
  border-radius: 8px;
}

Used heavily in Cards, Buttons, Input fields, and Modern UI design.

4. Margin

Margin is the space outside the border, separating elements from each other.

.box {
  margin: 20px;
}

Margin Collapsing (Very Important)

Vertical margins can collapse. This surprises many beginners.

h1 { margin-bottom: 20px; }
p { margin-top: 20px; }
/* Actual space is 20px, not 40px */

Rules: Only vertical margins collapse. Horizontal margins do not.

The `box-sizing` Property (Must Know)

The box-sizing property changes how width and height are calculated.

The Problem:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}
/* Total width = 350px (300 + 40 + 10) */

The Solution:

.box {
  box-sizing: border-box;
}
/* Total width stays 300px */

* {
  box-sizing: border-box;
}

Other Important Properties

Outline

Similar to border but does not take space and doesn't affect layout.

input:focus {
  outline: 2px solid blue;
}

Overflow

Controls what happens when content exceeds the box.

.box {
  overflow: hidden;
}

Values: visible (default), hidden, scroll, auto.

Inline vs Block Box Model

Block elements: Take full width, respect width/height/margin/padding.

Inline elements: Do not respect width/height, limited margin/padding.

Inline-Block Fix

span {
  display: inline-block;
  margin: 20px;
}

Now the box model applies fully.

Common Beginner Mistakes & Best Practices