← The box model lesson New set →

CSS Worksheet: Box Model

HTML and CSS lesson 16: The box model · Set 838 · 40 questions
TalentJR

Code tip (Inside out, twice): From the inside out: content → padding → border → margin. Border to border = width + 2 × padding + 2 × border. Total space = width + 2 × padding + 2 × border + 2 × margin.

NameDateTime takenScore ___ / 40
  1. 1.True or false: margin is the gap to other boxes. (a) False (b) True
  2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 250px;
      padding: 15px;
      border: 2px solid black;
      margin: 10px;
    }
  3. 3.📦 In the box model, which part is the gap to other boxes? (a) margin (b) padding (c) border (d) content
  4. 4.Which of these is padding? (a) the gap to other boxes (b) space inside the border (c) the line round the box (d) space outside the border
  5. 5.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 250px;
      padding: 5px;
      border: 2px solid black;
      margin: 10px;
    }
  6. 6.📦 In the box model, which part is the text or picture? (a) padding (b) border (c) content (d) margin
  7. 7.True or false: padding is the line round the box. (a) False (b) True
  8. 8.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 5px;
      border: 1px solid black;
      margin: 20px;
    }
  9. 9.Which of these is margin? (a) the text or picture (b) the gap round content (c) space outside the border (d) space inside the border
  10. 10.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 25px;
      border: 5px solid black;
      margin: 5px;
    }
  11. 11.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 210px;
      padding: 10px;
      border: 3px solid black;
      margin: 0px;
    }
  12. 12.Which of these is the content? (a) the gap round content (b) the text or picture (c) space outside the border (d) the gap to other boxes
  13. 13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 130px;
      padding: 20px;
      border: 5px solid black;
      margin: 5px;
    }
  14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 30px;
      border: 4px solid black;
      margin: 20px;
    }
  15. 15.True or false: the content is space inside the border. (a) True (b) False
  16. 16.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 10px;
      border: 2px solid black;
      margin: 0px;
    }
  17. 17.Which of these is the border? (a) the text or picture (b) space outside the border (c) space inside the border (d) a solid or dotted edge
  18. 18.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 30px;
      border: 1px solid black;
      margin: 0px;
    }
  19. 19.True or false: the border is the gap to other boxes. (a) False (b) True
  20. 20.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 25px;
      border: 4px solid black;
      margin: 10px;
    }
  21. 21.True or false: margin is space outside the border. (a) False (b) True
  22. 22.📦 In the box model, which part is a solid or dotted edge? (a) border (b) margin (c) padding (d) content
  23. 23.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 30px;
      border: 4px solid black;
      margin: 20px;
    }
  24. 24.📦 In the box model, which part is space inside the border? (a) padding (b) border (c) content (d) margin
  25. 25.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 300px;
      padding: 15px;
      border: 4px solid black;
      margin: 15px;
    }
  26. 26.True or false: padding is the text or picture. (a) False (b) True
  27. 27.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 10px;
      border: 4px solid black;
      margin: 20px;
    }
  28. 28.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 20px;
      border: 2px solid black;
      margin: 10px;
    }
  29. 29.Which of these is padding? (a) the line round the box (b) the gap round content (c) space outside the border (d) a solid or dotted edge
  30. 30.📦 In the box model, which part is space outside the border? (a) padding (b) content (c) border (d) margin
  31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 15px;
      border: 2px solid black;
      margin: 0px;
    }
  32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 30px;
      border: 5px solid black;
      margin: 10px;
    }
  33. 33.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 30px;
      border: 3px solid black;
      margin: 5px;
    }
  34. 34.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 160px;
      padding: 10px;
      border: 3px solid black;
      margin: 0px;
    }
  35. 35.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 15px;
      border: 5px solid black;
      margin: 20px;
    }
  36. 36.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 30px;
      border: 5px solid black;
      margin: 10px;
    }
  37. 37.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 100px;
      padding: 10px;
      border: 1px solid black;
      margin: 20px;
    }
  38. 38.True or false: padding is the gap round content. (a) True (b) False
  39. 39.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 290px;
      padding: 5px;
      border: 2px solid black;
      margin: 20px;
    }
  40. 40.📦 In the box model, which part is the line round the box? (a) padding (b) content (c) margin (d) border

Answer key

  1. True
  2. 284
  3. margin
  4. space inside the border
  5. 264
  6. content
  7. False
  8. 322
  9. space outside the border
  10. 340
  11. 236
  12. the text or picture
  13. 180
  14. 378
  15. False
  16. 304
  17. a solid or dotted edge
  18. 122
  19. False
  20. 118
  21. True
  22. border
  23. 218
  24. padding
  25. 368
  26. False
  27. 128
  28. 284
  29. the gap round content
  30. margin
  31. 284
  32. 150
  33. 236
  34. 186
  35. 150
  36. 230
  37. 162
  38. True
  39. 304
  40. border

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids