3.4  The CSS Box Model

Every HTML element is treated as a box. Understanding the box model is fundamental to controlling layout and spacing.

 

📌  IMPORTANT NOTE

The Box Model has 4 layers (from inside to outside):

1. CONTENT — the actual text or image inside the element.

2. PADDING — space between the content and the border (inside the box, same background colour).

3. BORDER — a line around the padding.

4. MARGIN — space outside the border (between this element and its neighbours — transparent).

 

CSS Box Model Properties

/* Box Model Example */

.card {

  width: 300px;              /* Content width */

  padding: 20px;             /* Space inside the box */

  border: 2px solid #1A3C5E; /* Visible border */

  margin: 15px;              /* Space outside the box */

  background-color: #f0f8ff; /* Background fills content + padding */

}

 

/* Shorthand for padding/margin (top, right, bottom, left — clockwise) */

.card { padding: 10px 20px 10px 20px; } /* all four sides */

.card { padding: 10px 20px; }           /* top/bottom 10px, left/right 20px */

.card { padding: 10px; }                /* all sides 10px */