CSSmarkup~20 mins

Margin in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Understanding CSS Margin

📖 Scenario: You are creating a simple webpage with a heading and a paragraph. You want to add space around these elements so they don't touch the edges of the browser window or each other.

🎯 Goal: Build a webpage with a heading and a paragraph. Use CSS margin properties to add space around these elements so they look neat and separated.

📋 What You'll Learn

Create an HTML structure with a <h1> heading and a <p> paragraph.

Add CSS to give the heading a margin of 2rem on all sides.

Add CSS to give the paragraph a top margin of 1.5rem and bottom margin of 3rem.

Use shorthand margin property for the paragraph.

💡 Why This Matters

🌍 Real World

Adding margin is a common way to create space between elements on a webpage, making content easier to read and visually appealing.

💼 Career

Understanding margin is essential for front-end developers and web designers to control layout and spacing in websites.

Progress0 / 4 steps

Create the HTML structure

Write the HTML code to create a <h1> heading with the text "Welcome to My Page" and a <p> paragraph with the text "This is a simple example to learn CSS margin."

CSS

Welcome to My Page
This is a simple example to learn CSS margin.

Need a hint?

Use <h1> and <p> tags with the exact text given.

Add CSS margin for the heading

Add a CSS rule for the h1 element that sets the margin on all sides to 2rem. Use the margin shorthand property.

CSS

Welcome to My Page
This is a simple example to learn CSS margin.


  h1 {
    /* Your code here */
  }

Need a hint?

Use margin: 2rem; inside the h1 CSS rule.

Add CSS margin for the paragraph

Add a CSS rule for the p element that sets the top margin to 1.5rem and the bottom margin to 3rem. Use the margin shorthand property with four values: top, right, bottom, left. Set right and left margins to 0.

CSS

Welcome to My Page
This is a simple example to learn CSS margin.


  h1 {
    margin: 2rem;
  }
  p {
    /* Your code here */
  }

Need a hint?

Use margin: 1.5rem 0 3rem 0; for the paragraph.

Complete the HTML document with semantic structure

Wrap the existing HTML and CSS inside a complete HTML5 document structure. Add <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">, a <title>, and place the CSS inside a <style> tag in the head. Put the content inside a <main> element in the body.

CSS

Need a hint?

Remember to include all required tags and place CSS inside the <style> tag in the head.