Box sizing in CSS - Mini Project: Build & Apply

Understanding Box Sizing with CSS

📖 Scenario: You are creating a simple webpage with a colored box. You want to control how the box's width and height behave when you add padding and borders.

🎯 Goal: Build a webpage with a box that uses the box-sizing property to include padding and border inside the box's total width and height.

📋 What You'll Learn

Create a box with a fixed width and height

Add padding and border to the box

Use the box-sizing property to control the box size

Make sure the box size does not grow when padding and border are added

💡 Why This Matters

🌍 Real World

Web designers use box-sizing to control layout and spacing precisely, avoiding unexpected size changes when adding padding or borders.

💼 Career

Understanding box-sizing is essential for front-end developers to create consistent, responsive designs that look good on all devices.

1

Create the HTML structure with a box

Write the HTML code to create a <div> element with the class box. This will be the colored box on the page.

CSS

Need a hint?

Use a div tag with class="box".

2

Add basic CSS for the box size and color

Write CSS to style the .box class with width: 200px;, height: 100px;, and a background color of lightblue.

CSS

.box {
  /* Your code here */
}

Need a hint?

Set width, height, and background-color inside the .box CSS rule.

3

Add padding and border to the box

Add CSS inside the .box rule to set padding: 20px; and border: 5px solid navy;.

CSS

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  /* Your code here */
}

Need a hint?

Use padding and border properties inside the .box CSS rule.

4

Apply box-sizing: border-box; to the box

Add the CSS property box-sizing: border-box; inside the .box rule to make padding and border included in the box's total width and height.

CSS

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  padding: 20px;
  border: 5px solid navy;
  /* Your code here */
}

Need a hint?

Use box-sizing: border-box; to include padding and border inside the box size.