wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

CSS Box Model References Sheet

Total questions: 20

Worksheet time: 10mins

Name
Class
Date
1.

What is the innermost part of the CSS Box Model?

a)

Border

b)

Margin

c)

Content

d)

Padding

2.

Which part of the box model adds space inside the border?

a)

Margin

b)

Content

c)

Padding

d)

Width

3.

What does the margin control?

a)

Space inside the border

b)

Space outside the border

c)

Width of content

d)

Border color

4.

Which layer of the box model is directly outside padding?

a)

Margin

b)

Border

c)

Content

d)

Width

5.

Which CSS property sets the line around an element?

a)

margin

b)

padding

c)

border

d)

outline

6.

What CSS property would you use to add space between two different elements?

a)

padding

b)

border

c)

width

d)

margin

7.

Which border style is valid?

a)

thick

b)

dashed

c)

hidden-dots

d)

glow

8.

What does padding: 10px 20px 10px 20px; represent?

a)

Only left padding

b)

All sides the same

c)

Top, right, bottom, left

d)

Right, left, top, bottom

9.

What property centers an element horizontally when set to 0 auto?

a)

padding

b)

text-align

c)

margin

d)

border

10.

Which of the following increases the total size of a box by default?

a)

width

b)

height

c)

padding + border

d)

margin

11.

What does box-sizing: border-box; do?

a)

Makes text bigger

b)

Keeps width the same even with padding/border

c)

Removes the border

d)

Centers the item

12.

Which part of an element contains the actual text or image?

a)

Border

b)

Padding

c)

Content

d)

Margin

13.

Which property adds space around the content but inside the border?

a)

padding

b)

margin

c)

outline

d)

spacing

14.

What are the three parts of a border?

a)

margin, padding, width

b)

width, style, color

c)

left, right, center

d)

top, bottom, auto

15.

If you want to push an element farther away from another element, you should increase the…

a)

padding

b)

margin

c)

border

d)

width

16.

What is the default order for margin and padding shortcuts?

a)

left, right, top, bottom

b)

right, left, bottom, top

c)

top, right, bottom, left

d)

top, left, bottom, right

17.

Which part of the box model is outside everything else?

a)

padding

b)

margin

c)

border

d)

content

18.

Which property would you use to add a solid black border of 2px?

a)

border: black solid 2px;

b)

border: 2px solid black;

c)

border: solid;

d)

border: 2px dashed red;

19.

Which part creates space that is NOT included in the element’s total size calculation (by default)?

a)

padding

b)

content

c)

border

d)

margin

20.

Which of the following is recommended for keeping element size easier to manage?

a)

border-style: dotted;

b)

margin: auto;

c)

box-sizing: border-box;

d)

padding: 100px;