CSSmarkup~15 mins

Padding in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Adding Padding to a Box

📖 Scenario: You are creating a simple webpage with a colored box. You want to add space inside the box around the text so it looks neat and not cramped.

🎯 Goal: Build a webpage with a colored box that has padding inside it. The padding should create space between the box border and the text inside.

📋 What You'll Learn

Create an HTML structure with a <div> element containing text.

Add a CSS rule to select the box by its class.

Add padding of 2rem inside the box using CSS.

Use semantic HTML and include basic meta tags for accessibility and responsiveness.

💡 Why This Matters

🌍 Real World

Padding is used in web pages to create space inside elements so content looks neat and is easy to read.

💼 Career

Web developers use padding to improve the design and user experience of websites by controlling spacing inside elements.

Progress0 / 4 steps

Create the HTML structure with a box

Create an HTML file with a <div> element that has the class box and contains the text "This is a box". Also include the basic HTML5 structure with <!DOCTYPE html>, <html lang="en">, <head> with charset UTF-8 and viewport meta tags, and a <body>.

CSS




  
  
  Box with Padding

Need a hint?

Remember to include the div with class box inside the body tag.

Add a CSS style block and select the box

Inside the <head> section, add a <style> block. Inside it, write a CSS rule that selects the class box using .box.

CSS




  
  
  Box with Padding
  
    /* Select the box class here */
  


  This is a box

Need a hint?

Use .box { } inside the <style> block to select the box.

Add padding inside the box

Inside the CSS rule for .box, add a padding property and set it to 2rem. This will add space inside the box around the text.

CSS




  
  
  Box with Padding
  
    .box {
      /* Add padding: 2rem; here */
    }
  


  This is a box

Need a hint?

Use padding: 2rem; inside the .box CSS rule.

Add background color and border for better visibility

Inside the .box CSS rule, add a background-color property with the value #cce5ff and a border property with 2px solid #004085. This will make the box visible and show the padding effect clearly.

CSS




  
  
  Box with Padding
  
    .box {
      padding: 2rem;
      /* Add background-color and border here */
    }
  


  This is a box

Need a hint?

Add background-color: #cce5ff; and border: 2px solid #004085; inside the .box CSS rule.