What is CSS margin collapse?
B
When top and bottom margins of block elements combine
C
When left and right margins are removed
D
When padding and margin become equal
Analysis & Theory
Margin collapse happens when vertical margins (top/bottom) of block elements overlap and combine into one.
Which margins can collapse in CSS?
A
Only left and right margins
B
Only top and bottom margins
Analysis & Theory
Only top and bottom margins can collapse, not left or right.
What will be the margin between two block elements with `margin-bottom: 30px;` and `margin-top: 20px;`?
Analysis & Theory
Wrong — the correct answer is `30px`, not `50px`. The larger of the two margins is used during collapse.
When two vertical margins collapse, what value is used?
Analysis & Theory
During margin collapse, the browser uses the larger of the two vertical margins.
Do horizontal (left/right) margins collapse in CSS?
D
Only with inline elements
Analysis & Theory
Only vertical margins (top and bottom) can collapse. Horizontal margins do not collapse.
Which of the following prevents margin collapse?
A
Adding padding or border
B
Adding background color
D
Changing display to inline
Analysis & Theory
Padding or border between elements prevents margin collapse.
What happens when a parent and first child both have top margins?
B
The parent margin overrides the child
C
They collapse into a single margin
Analysis & Theory
Parent and first child top margins collapse and the largest value is used.
Can negative margins collapse?
B
Yes, and they are added algebraically
D
Only when using padding
Analysis & Theory
Negative and positive margins can collapse and are combined algebraically.
Which of the following scenarios **does NOT** trigger margin collapse?
A
Two vertical margins between sibling elements
B
Parent and child top margins
C
An inline element with margins
D
Two block elements stacked vertically
Analysis & Theory
Inline elements do not trigger vertical margin collapse.
How can you avoid collapsing margins in CSS?
A
Add padding or border to the parent
B
Use overflow: hidden or auto
Analysis & Theory
Adding padding/border, using `overflow`, or inserting content can prevent margin collapse.