CSS CSS Box Model & Spacing 2 — Questions and Answers
Question 1: What is 'margin collapsing' in CSS?
- When margins are always added together between adjacent elements
- When adjacent vertical margins combine into a single margin equal to the largest value (Correct answer)
- When a margin property is overridden by a padding property
- When margins shrink to zero on flex containers
Correct answer: When adjacent vertical margins combine into a single margin equal to the largest value
Margin collapsing occurs when vertical margins of adjacent block elements merge into one margin whose size is the largest of the individual margins.
Question 2: Which layout context prevents margin collapsing from occurring between parent and child elements?
- Block formatting context
- Inline formatting context
- Flex formatting context (Correct answer)
- Table formatting context
Correct answer: Flex formatting context
Flex containers create a flex formatting context, which prevents margin collapsing between the container and its flex items.
Question 3: Given `padding: 5px 10px 15px`, what is the computed padding for the left side?
- 5px
- 15px
- 10px (Correct answer)
- 0px
Correct answer: 10px
With three values, the pattern is: top=5px, left/right=10px, bottom=15px — so the left side inherits the second value.
Question 4: Which CSS property specifies the space outside an element's border, pushing away surrounding elements?
- padding
- outline-offset
- spacing
- margin (Correct answer)
Correct answer: margin
Margin creates space on the outside of the border, creating distance between an element and its neighbors.
Question 5: What is the effect of setting a negative margin value in CSS?
- It is ignored by the browser
- It pulls the element toward the direction of the negative margin, potentially overlapping other content (Correct answer)
- It converts the margin to negative padding
- It sets the margin to the element's computed height
Correct answer: It pulls the element toward the direction of the negative margin, potentially overlapping other content
Negative margins pull elements in the specified direction, reducing the space and potentially causing overlap with adjacent elements.
Question 6: In the CSS box model, which layer is directly adjacent to the element's content area?
- Border
- Margin
- Outline
- Padding (Correct answer)
Correct answer: Padding
Padding is the first layer surrounding content, positioned between the content and the border.
Question 7: Which CSS property determines how the width and height of an element are calculated relative to padding and border?
- display
- overflow
- box-sizing (Correct answer)
- sizing
Correct answer: box-sizing
`box-sizing` controls whether padding and border are included in or added to the element's declared width and height.
CSS CSS Box Model & Spacing 2
What is 'margin collapsing' in CSS?