CSS Box Model

The CSS Box Model is a foundational concept that defines how the size of every HTML element is calculated and how it appears on the web page.

Each element is treated like a rectangular box with the following layers:

Content

This is where your actual content lives – like text, images, or videos.

You control the size of this area using:

Despite all the other rules, the text appears purple because the style attribute has the highest specificity.

Padding

Padding is the space between the content and the element’s border. It creates breathing room inside the element.

				
					padding: 20px;

Border

The border wraps around the content and padding. You can customize its size, color, and style.

				
					border: 5px dashed darkcyan;

Margin

Margin is the outside the element. It separates the element from its neighbors.

				
					margin: 10px;

Visual Representation

How is the Total Size Calculated?

Formula for width: Total Width = Content Width + Left/Right Padding + Left/Right Border + Left/Right Margin

Formula for height: Total Height = Content Height + Top/Bottom Padding + Top/Bottom Border + Top/Bottom Margin

Box Model Example

				
					<!DOCTYPE html>
<html>
<head>
  <title>Box Model - Learn With Arshyan</title>
  <style>
    .box {
      width: 220px;
      height: 150px;
      padding: 20px;
      border: 8px solid royalblue;
      margin: 12px;
      background-color: #f9f9f9;
      font-family: Arial;
    }
  </style>
</head>
<body>

  <div class="box">
    Welcome to Learn With Arshyan!
  </div>

</body>
</html>

Total Width = 220 (width) + 20 + 20 (padding) + 8 + 8 (border) + 12 + 12 (margin) = 300px

Total Height = 150 (height) + 20 + 20 (padding) + 8 + 8 (border) + 12 + 12 (margin) = 230px

Quick Activity

To see how box model works visually:

Right-click → Inspect
Click the cursor icon in the DevTools (top left)
Hover or select your element
Under “Computed” , check the Box Model Diagram