Margin in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add space outside the box using margin.

CSS

div {
  margin: [1];
}

Drag options to blanks, or click blank then click option'

A10rem

Bcenter

Csolid

D10px

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'solid' which is a border style, not a margin value.

Using 'center' which is not a valid margin value.

The margin property sets the space outside an element. Using 10px adds 10 pixels of space around the element.

2fill in blank

medium

Complete the code to add equal margin on all sides of the paragraph.

CSS

p {
  margin: [1];
}

Drag options to blanks, or click blank then click option'

Anone

Bauto

C5em

Dbold

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' which centers block elements horizontally but does not set equal margin on all sides.

Using 'none' which removes margin but is not a valid margin value.

Using 5em sets the margin equally on all sides of the paragraph. The unit em scales with the font size.

3fill in blank

hard

Fix the error in the margin shorthand to set top and bottom margin to 10px and left and right margin to 20px.

CSS

section {
  margin: [1];
}

Drag options to blanks, or click blank then click option'

A20px 10px

B10px 20px

C10px 20px 10px

D20px

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the values so left and right get 10px instead of 20px.

Using three values which is invalid shorthand for margin.

The shorthand margin: 10px 20px; sets top and bottom margins to 10px, and left and right margins to 20px.

4fill in blank

hard

Fill both blanks to set margin-top to 15px and margin-left to 5rem.

CSS

div {
  margin-top: [1];
  margin-left: [2];
}

Drag options to blanks, or click blank then click option'

A15px

B5rem

C10px

D2em

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up margin-top and margin-left values.

Using units inconsistently.

Use 15px for margin-top and 5rem for margin-left to set the correct spacing.

5fill in blank

hard

Fill all three blanks to create a margin shorthand that sets top margin to 10px, right margin to 20px, and bottom margin to 30px.

CSS

article {
  margin: [1] [2] [3];
}

Drag options to blanks, or click blank then click option'

A10px

B20px

C30px

D40px

Attempts:

3 left

💡 Hint

Common Mistakes

Using four values instead of three for this case.

Mixing the order of values.

The margin shorthand with three values sets top, right and left, and bottom margins respectively. Here, top is 10px, right and left are 20px, and bottom is 30px.

Practice

1. What does the CSS margin property do?

easy

A. Changes the background color of an element

B. Adds space outside an element to separate it from others

C. Adds space inside an element around its content

D. Sets the font size of text inside an element

Solution

1. Step 1: Understand margin property purpose

   The margin property controls the space outside an element, creating separation from other elements.

2. Step 2: Differentiate margin from padding

   Padding adds space inside the element, margin adds space outside it.

3. Final Answer:

   Adds space outside an element to separate it from others -> Option B

4. Quick Check:

   Margin = space outside element [OK]

Hint: Margin controls outside space, padding controls inside space [OK]

Common Mistakes:

• Confusing margin with padding
• Thinking margin changes element color
• Mixing margin with font properties

2. Which of the following is the correct CSS syntax to set a 2rem margin on all sides of an element?

easy

A. margin: 2rem;

B. margin: 2rem 2rem 2rem;

C. margin: 2rem 0;

D. margin: 2rem 2rem 2rem 2rem 2rem;

Solution

1. Step 1: Recall shorthand margin syntax

   Using one value sets margin equally on all four sides.

2. Step 2: Check options for correct shorthand

   margin: 2rem; uses one value correctly. margin: 2rem 2rem 2rem; uses three values (top, sides, bottom). margin: 2rem 0; uses two values (top/bottom and left/right). margin: 2rem 2rem 2rem 2rem 2rem; has five values, which is invalid.

3. Final Answer:

   margin: 2rem; -> Option A

4. Quick Check:

   One value sets all sides equally [OK]

Hint: One value sets margin on all sides equally [OK]

Common Mistakes:

• Using too many values in margin shorthand
• Confusing margin with padding syntax
• Forgetting units like rem or px

3. Given this CSS code:

div {
  margin: 1rem 2rem 3rem 4rem;
}

What is the margin on the bottom side of the div?

medium

A. 1rem

B. 2rem

C. 3rem

D. 4rem

Solution

1. Step 1: Understand margin shorthand order

   Margin values in order: top, right, bottom, left.

2. Step 2: Identify bottom margin value

   The third value is bottom margin, which is 3rem here.

3. Final Answer:

   3rem -> Option C

4. Quick Check:

   Margin order: top, right, bottom, left [OK]

Hint: Remember margin order: TRBL (top, right, bottom, left) [OK]

Common Mistakes:

• Mixing up the order of margin values
• Choosing left or right value instead of bottom
• Ignoring the order and picking first value

4. This CSS code is intended to add 10px margin on all sides of a paragraph, but it doesn't work:

p {
  margin: 10;
}

What is the error?

medium

A. Missing unit 'px' after 10

B. Wrong property name, should be 'padding'

C. Margin cannot be set on paragraphs

D. Value 10 is too small to see margin

Solution

1. Step 1: Check CSS value units

   CSS length values require units like px, rem, em unless zero.

2. Step 2: Identify missing unit error

   Value '10' without unit is invalid, so margin is ignored.

3. Final Answer:

   Missing unit 'px' after 10 -> Option A

4. Quick Check:

   Length values need units except zero [OK]

Hint: Always add units like px or rem for margin values except zero [OK]

Common Mistakes:

• Forgetting units on numeric values
• Confusing margin with padding
• Assuming margin can't apply to paragraphs

5. You want to center a fixed-width box horizontally inside its container using margin. Which CSS rule achieves this best?

hard

A. margin-left: 50%;

B. margin: auto 0;

C. margin: 10px;

D. margin: 0 auto;

Solution

1. Step 1: Understand horizontal centering with margin

   Setting left and right margins to auto centers a block horizontally.

2. Step 2: Analyze options for horizontal centering

   margin: 0 auto; sets top/bottom margin 0 and left/right margin auto, centering horizontally. margin: auto 0; sets vertical margins auto, which doesn't center horizontally. margin: 10px; sets fixed margin on all sides, no centering. margin-left: 50%; moves box 50% from left, but does not center properly.

3. Final Answer:

   margin: 0 auto; -> Option D

4. Quick Check:

   Horizontal center = margin-left/right auto [OK]

Hint: Use margin: 0 auto to center block horizontally [OK]

Common Mistakes:

• Using margin auto on top/bottom instead of left/right
• Setting fixed margin values instead of auto
• Using margin-left 50% without transform