Loading...

It’s time to check your understanding of margins, padding and borders.

Before you take your quiz, work through the multiple choice activity below.

What style would you apply to a div so that the text inside it leaves 20px of space on the left?

  1. padding-left:20px
  2. left-padding:20px
  3. margin-left:20px
  4. left-margin:20px

For the text to leave space, you need to add space inside the div.

For the text to leave space, you need to add space inside the div.

For the text to leave space, you need to add space inside the div.

For the text to leave space, you need to add space inside the div.

Which of the following code excerpts would successfully put 30px of space between two paragraphs?

  1. <p style="margin-bottom:15px">Paragraph 1</p>
    <p style="margin-top:15px">Paragraph 2</p>
  2. <p style="margin-bottom:30px">Paragraph 1</p>
    <p>Paragraph 2</p>
  3. <p style="margin-bottom:10px">Paragraph 1</p>
    <p style="margin-top:20px">Paragraph 2</p>
  4. <p>Paragraph 1</p>
    <p style="margin-bottom:30px">Paragraph 2</p>

If there are competing margins between two block elements, only the larger margin will be used.

If there are competing margins between two block elements, only the larger margin will be used.

If there are competing margins between two block elements, only the larger margin will be used.

If there are competing margins between two block elements, only the larger margin will be used.

Which styles would be needed to produce this border around a div?


  1. border:3px double #000000
  2. border-left:medium dashed #000000; border-top:medium dashed #000000; border-bottom:medium dashed #000000;
  3. border:medium double #000000; border-right:none;
  4. border:thin solid #000000; border-right:none;

The border shown is black, medium thickness and has a double style all the way around except for the right side.

The border shown is black, medium thickness and has a double style all the way around except for the right side.

The border shown is black, medium thickness and has a double style all the way around except for the right side.

The border shown is black, medium thickness and has a double style all the way around except for the right side.

What is the shortest way to correctly add a margin of 20px to the top and bottom, and a margin of 10 to the left and right?

  1. margin-top:20px; margin-right:10px;
    margin-bottom:20px; margin-left:10px
  2. margin:20px 10px 20px 10px
  3. margin:10px 20px 10px 20px
  4. margin:20px 10px

The quickest way to add "pairs"of equal margins is to set one value for the top/bottom and then another for left/right.

The quickest way to add "pairs"of equal margins is to set one value for the top/bottom and then another for left/right.

The quickest way to add "pairs"of equal margins is to set one value for the top/bottom and then another for left/right.

The quickest way to add "pairs"of equal margins is to set one value for the top/bottom and then another for left/right.

You have a div in your layout that can take up 400px by 400px of space total. You'd like to fit four images into the div in a 2x2 grid. Each image is 175px by 175px, and each one has a 2px border around it. How much padding can you add to the div?

visualization of the problem

  1. style="padding:110px"
  2. style="padding:46px"
  3. style="padding:21px"
  4. style="padding:17px"

Because the measurements are the same for width and height, the same formula would be used for either. 400px[div] - 350px[images] - 8px[borders] = 42/2 = 21px of padding on every side

Because the measurements are the same for width and height, the same formula would be used for either. 400px[div] - 350px[images] - 8px[borders] = 42/2 = 21px of padding on every side

Because the measurements are the same for width and height, the same formula would be used for either. 400px[div] - 350px[images] - 8px[borders] = 42/2 = 21px of padding on every side

Because the measurements are the same for width and height, the same formula would be used for either. 400px[div] - 350px[images] - 8px[borders] = 42/2 = 21px of padding on every side

Summary

Questions answered correctly:

Questions answered incorrectly: