NEW
Font size
WorksheetsCSS Box Model References Sheet
Total questions: 20
Worksheet time: 10mins
What is the innermost part of the CSS Box Model?
Border
Margin
Content
Padding
Which part of the box model adds space inside the border?
Margin
Content
Padding
Width
What does the margin control?
Space inside the border
Space outside the border
Width of content
Border color
Which layer of the box model is directly outside padding?
Margin
Border
Content
Width
Which CSS property sets the line around an element?
margin
padding
border
outline
What CSS property would you use to add space between two different elements?
padding
border
width
margin
Which border style is valid?
thick
dashed
hidden-dots
glow
What does padding: 10px 20px 10px 20px; represent?
Only left padding
All sides the same
Top, right, bottom, left
Right, left, top, bottom
What property centers an element horizontally when set to 0 auto?
padding
text-align
margin
border
Which of the following increases the total size of a box by default?
width
height
padding + border
margin
What does box-sizing: border-box; do?
Makes text bigger
Keeps width the same even with padding/border
Removes the border
Centers the item
Which part of an element contains the actual text or image?
Border
Padding
Content
Margin
Which property adds space around the content but inside the border?
padding
margin
outline
spacing
What are the three parts of a border?
margin, padding, width
width, style, color
left, right, center
top, bottom, auto
If you want to push an element farther away from another element, you should increase the…
padding
margin
border
width
What is the default order for margin and padding shortcuts?
left, right, top, bottom
right, left, bottom, top
top, right, bottom, left
top, left, bottom, right
Which part of the box model is outside everything else?
padding
margin
border
content
Which property would you use to add a solid black border of 2px?
border: black solid 2px;
border: 2px solid black;
border: solid;
border: 2px dashed red;
Which part creates space that is NOT included in the element’s total size calculation (by default)?
padding
content
border
margin
Which of the following is recommended for keeping element size easier to manage?
border-style: dotted;
margin: auto;
box-sizing: border-box;
padding: 100px;
