Box model calculation in CSS - Mini Project: Build & Apply

Box Model Calculation

📖 Scenario: You are creating a simple webpage layout. You want to understand how the CSS box model works by calculating the total width of a box including its content, padding, border, and margin.

🎯 Goal: Build a CSS style for a <div> element with specific content width, padding, border, and margin. Calculate the total width of the box as it will appear on the page.

📋 What You'll Learn

Create a CSS rule for a .box class with a content width of 200px

Add padding of 20px on all sides

Add a border of 5px solid black

Add a margin of 10px on all sides

Calculate the total width of the box including content, padding, border, and margin

💡 Why This Matters

🌍 Real World

Understanding the CSS box model helps you design web pages with precise control over layout and spacing.

💼 Career

Web developers and designers must know how to calculate box sizes to create responsive and visually appealing websites.

1

Create the base CSS for the box content width

Write a CSS rule for the class .box that sets the width property to 200px.

CSS

.box {
  /* Set the content width to 200px */
  /* Your code here */
}

Need a hint?

Use the width property inside the .box selector.

2

Add padding to the box

Add padding: 20px; inside the existing .box CSS rule to add space inside the box around the content.

CSS

.box {
  width: 200px;
  /* Add padding of 20px on all sides */
  /* Your code here */
}

Need a hint?

Padding adds space inside the box around the content.

3

Add border to the box

Add a border of 5px solid black inside the .box CSS rule to create a visible border around the padding.

CSS

.box {
  width: 200px;
  padding: 20px;
  /* Add a 5px solid black border */
  /* Your code here */
}

Need a hint?

The border goes outside the padding but inside the margin.

4

Add margin to the box

Add a margin of 10px on all sides inside the .box CSS rule to create space outside the border.

CSS

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Add margin of 10px on all sides */
  /* Your code here */
}

Need a hint?

Margin creates space outside the border.