HTML & CSS · Junior · Question 15 of 75

Two blocks are stacked. The top one has margin-bottom: 20px, the bottom one margin-top: 30px. What is the gap between them?

Explanation

This is margin collapsing: of two adjacent vertical margins in normal flow, the larger one wins - 30px. Horizontal margins don't collapse, and there is no collapsing inside flex and grid containers at all.

Further reading

Problem with a question

HTML & CSS · Junior · question 15

Test yourself

Take the HTML & CSS · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.

Take this quiz