CSSmarkup~30 mins

Common box model issues in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Common Box Model Issues

📖 Scenario: You are creating a simple webpage layout with a box that should have a fixed width and padding. However, the box size is not what you expect because of how the CSS box model works.

🎯 Goal: Build a webpage with a <div> box that has a width of 200px and padding of 20px, but the total width of the box should remain 200px by fixing common box model issues.

📋 What You'll Learn

Create a div with class box inside the body.

Set the width of the .box to 200px.

Add padding of 20px to the .box.

Fix the box model so the total width including padding stays 200px.

Add a visible border and background color to the box for clarity.

💡 Why This Matters

🌍 Real World

Understanding the box model is essential for creating layouts that look exactly as designed, avoiding unexpected sizes and overflow.

💼 Career

Web developers must control element sizes precisely to build responsive and visually consistent websites.

Progress0 / 4 steps

Create the HTML structure

Create a basic HTML5 skeleton with a div element that has the class box inside the body.

CSS




    
    
    Box Model Issue

Need a hint?

Remember to add a div with the class box inside the body tag.

Add CSS width and padding

Add a <style> block inside the <head> and write CSS to set the .box width to 200px and padding to 20px.

CSS




    
    
    Box Model Issue
    


    This is a box

Need a hint?

Use a <style> tag and write CSS for the .box class with width: 200px; and padding: 20px;.

Add border and background color

Inside the existing <style> block, add CSS to give the .box a 2px solid black border and a light gray background color #ddd.

CSS




    
    
    Box Model Issue
    
        .box {
            width: 200px;
            padding: 20px;
            /* Add border and background color here */
        }
    


    This is a box

Need a hint?

Add border: 2px solid black; and background-color: #ddd; inside the .box CSS.

Fix the box model issue with box-sizing

Add box-sizing: border-box; to the .box CSS so the total width including padding and border stays 200px.

CSS




    
    
    Box Model Issue
    
        .box {
            width: 200px;
            padding: 20px;
            border: 2px solid black;
            background-color: #ddd;
            /* Add box-sizing property here */
        }
    


    This is a box

Need a hint?

Use box-sizing: border-box; inside the .box CSS to include padding and border in the width.