CSS CSS Box Model & Spacing 1 — Questions and Answers
Question 1: What are the four layers that make up the CSS box model, from innermost to outermost?
- Content, padding, border, margin (Correct answer)
- Content, spacing, outline, frame
- Text, background, shadow, border
- Body, header, container, wrapper
Correct answer: Content, padding, border, margin
The CSS box model consists of content at the center, surrounded by padding, then border, then margin as the outermost layer.
Question 2: Which value of the `box-sizing` property makes an element's total rendered width include padding and border?
- content-box
- border-box (Correct answer)
- padding-box
- full-box
Correct answer: border-box
`box-sizing: border-box` causes padding and border to be included within the declared width/height, preventing unexpected size increases.
Question 3: What is the default value of the `box-sizing` property in CSS?
- border-box
- padding-box
- content-box (Correct answer)
- margin-box
Correct answer: content-box
By default, `box-sizing: content-box` is applied, meaning padding and border are added on top of the declared width/height.
Question 4: What does `margin: auto` typically achieve when applied to a block element with a defined width?
- Removes all margins from the element
- Centers the element horizontally within its container (Correct answer)
- Adds equal padding on all sides
- Sets margin equal to the viewport width
Correct answer: Centers the element horizontally within its container
Setting `margin: auto` on left and right distributes the remaining space equally on both sides, horizontally centering the block element.
Question 5: When four values are provided to the `margin` shorthand (e.g., `margin: 10px 20px 30px 40px`), in what order are they applied?
- Left, right, top, bottom
- Top, bottom, left, right
- Top, right, bottom, left (Correct answer)
- Right, top, left, bottom
Correct answer: Top, right, bottom, left
CSS shorthand with four values follows the clockwise order: top, right, bottom, left (remember TRBL or 'trouble').
Question 6: What does `padding: 10px 20px` set for an element?
- Top/bottom = 10px, left/right = 20px (Correct answer)
- All sides = 10px except right = 20px
- Left/right = 10px, top/bottom = 20px
- Top = 10px, all other sides = 20px
Correct answer: Top/bottom = 10px, left/right = 20px
With two values, the first applies to top and bottom, and the second applies to left and right.
Question 7: Which CSS property controls the space between an element's content area and its border?
- margin
- gap
- padding (Correct answer)
- spacing
Correct answer: padding
Padding creates space between the content and the border, pushing the border away from the content.
CSS CSS Box Model & Spacing 1
What are the four layers that make up the CSS box model, from innermost to outermost?