2. The code specifies margins of 1 em all around, except for the right. It has no margin. Fill in the blank.
margin: 1em __ 1em 1em;

That's correct. Well done!

The correct code:
0

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

3. When you specify all 4 margins, which margin is specified first?

That's correct. Well done!

The correct answer:
top

Press Tab or click button to advance to next exercise.

4. What is the more concise way to code this?
margin: 0 0 .5em 0;

That's correct. Well done!

The correct code:
margin-bottom: .5em;

Press Tab or click button to advance to next exercise.

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to style paragraphs with left and right margins. The left margin is larger.

6. Click in the box and type the next character. I'll autocomplete. Don't type spaces or carriage returns. When the exercise is complete, I'll turn the exercise number green.

Create a class of paragraphs, named "separated" with a bottom margin of .75 ems. Specify all the margins for this class.

7. Fail-safe coding. If you type the wrong character, I'll cancel the keystroke. Type spaces. When the exercise is complete, I'll turn the exercise number green.

Rewrite this code without specifying all the margins.
margin: 0 0 0 .5em;

8. Specifying margins for all four sides in a single statement, give h4 headings equal left and right margins of .25 ems. Specify top and bottom margins of 0.

That's correct. Well done!

The correct code:
h4 {
  margin: 0 .25em 0 .25em;
}

Press Tab or click button to advance to next exercise.

9. For paragraphs, specify equal top and bottom margins of .5 ems without specifying margins for left and right.

That's correct. Well done!

The correct code:
p {
  margin-top: .5em;
  margin-bottom: .5em;
}

Press Tab or click button to advance to next exercise.

10. In a single statement specify all four margins for a class of paragraph. The bottom margin is .25 ems. The other margins are twice that size. Make up the name.

That's correct. Well done!

The correct code:
p.inset {
  margin: .5em .5em .25em .5em;
}

Press Tab or click button to advance to next exercise.

11. Give paragraphs a bottom margin that separates them by .75 ems and have a first-line indent of the same size. Don't specify any other margins.

That's correct. Well done!

The correct code:
p {
  margin-bottom: .75em;
  text-indent: .75em;
}

Press Tab or click button to advance to next exercise.

12. Style a class of headings (your choice of size) that have equal left and right margins of 1 em and are 120% of the "normal" size. Specify the margins in a single statement. Make up the name.

That's correct. Well done!

Example:
h3.standout {
  margin: 0 1em 0 1em;
  font-size: 1.2em;
}

Press Tab or click button to advance to next exercise.

The next several exercises are timed. If you type slowly or dislike time pressure, feel free to increase the allotted time.

13. Time goal: 20 seconds. Rewrite this code without specifying all the margins.
margin: 0 0 0 .5em;

Press Tab or click button to check answer.

The correct code:
margin-left: .5em;

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

14. Time goal: 40 seconds. Specifying margins for all four sides in a single statement, give h4 headings left and right margins of .25 ems. Specify top and bottom margins of 0.

Press Tab or click button to check answer.

The correct code:
h4 {
  margin: 0 .25em 0 .25em;
}

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

15. Time goal: 45 seconds. For paragraphs, specify equal top and bottom margins of .5 ems without specifying margins for left and right.

Press Tab or click button to check answer.

The correct code:
p {
  margin-top: .5em;
  margin-bottom: .5em;
}

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

16. Time goal: 60 seconds. Style a class of headings (your choice of size) that have equal left and right margins of 1 em and are 120% of the "normal" size. Specify the margins in a single statement. Make up the name.

Press Tab or click button to check answer.

Example:
h3.standout {
  margin: 0 1em 0 1em;
  font-size: 1.2em;
}

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

17. Time goal: 55 seconds. Specify all four margins for a class of paragraph. The bottom margin is .25 ems. The other margins are twice that size. Make up the name.

Press Tab or click button to check answer.

The correct code:
p.inset {
  margin: .5em .5em .25em .5em;
}

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

18. Time goal: 45 seconds. Give paragraphs a bottom margin that separates them by .75 ems and have a first-line indent of the same size. Don't specify any other margins.

Press Tab or click button to check answer.

The correct code:
p {
  margin-bottom: .75em;
  text-indent: .75em;
}

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

19. Access this live coding exercise at JS Fiddle. When you've completed the exercise, close the JS Fiddle window, and you'll be returned to this page. (If JS Fiddle displays a warning message saying that your changes will be reset, click Leave this Page.)

Click button to advance.

20. Access this live coding exercise at JS Fiddle. When you've completed the exercise, close the JS Fiddle window, and you'll be returned to this page. (If JS Fiddle displays a warning message saying that your changes will be reset, click Leave this Page.)

Click button to advance.