Briefly explain how margins can collapse.

What will be an ideal response?

When designing a Web page, you could have two adjacent vertical boxes on the page. For example, it's quite common to place one image above or below another image to create an image gallery. In such a case, it can be difficult to determine the top and bottom of the images because of margin collapse, which occurs when two adjoining top and bottom margins combine to form a single margin. Browsers render the greater of the two adjacent margins, not the sum of both. For example, let's say that you had two images on your Web page, with one image positioned directly below the other. If the top image had a bottom margin of 25px and the bottom image had a top margin of 20px, you would expect the distance between the top image and the bottom image to be 45px because 25 + 20 = 45. However, the actual distance would be 25px, which is the larger of the two margins. Margin collapse occurs only when two vertical margins come in contact. The margins of two images that are side by side do not collapse.