Font size
WorksheetsBox Model Quiz
Total questions: 10
Worksheet time: 6mins
Which component of the CSS Box Model is the transparent space inside the border, separating the border from the element's actual content?
Margin
Padding
Box-Sizing
Content
In the standard CSS Box Model flow, which component is the outermost layer that creates space between the element and its neighboring elements?
Outline
Border
Margin
Padding
Which of the following correctly sets a thickness of 3 pixels around a paragraph element?
border-weight: 3px;
border-width: 3px;
border: 3px;
border-thickness: 3px;
If you set padding: 10px 20px;, what does 20px represent?
Padding for all sides
Padding for top and bottom
Padding for left and right
Padding for bottom only
Which code snippet will create 30px of space between two <div> elements?
div { border: 30px; }
div { padding: 30px; }
div { spacing: 30px; }
div { margin: 30px; }
Given the following CSS:
What is the total extra space (in pixels) added horizontally to the content (excluding the content width)?
64px
22px
44px
84px
Which of the following correctly removes the top margin of a <p> element but keeps the other sides at 10px?
margin: 0 10px 10px 10px;
margin: 10px 10px 10px 0;
margin: 10px 0 10px 10px;
margin-top: none;
What will be the result of the following CSS?
All sides have the same border width and color.
Each side has a different width but the same color.
Each side has a different width and color
The code will produce an error.
You want to add 10px of padding to the top and bottom, and 0px to the left and right. Which shorthand is correct?
padding: 10px;
padding: 10px 0;
padding: 0 10px;
padding: 10px 0px 10px 0px;
Which statement best describes the difference between margin and padding in the CSS box model?
Margin is inside the border; padding is outside.
Padding is between the content and the border; margin is outside the border.
Margin and padding have the same effect on layout.
Padding affects only text, not elements.
