CSS margin collapse: Why does my margin-top move the parent element?

Detailed explanation of CSS margin collapse: Cleverly solve margin problems

When learning CSS layout, margin attributes often bring some unexpected results, especially the "margin collapse" phenomenon. This article will use a case to deeply analyze the causes and solutions of margin collapse.

Question: Assume in one<canvas></canvas> Nested an element inside<div> element (id is "one"), and set <code>margin-top for "one". Strangely, after setting margin-top , not only the "one" element is moved downward,<canvas></canvas> The element also moved downwards.

Code structure (simplified):

HTML: <canvas><div id="one">...</div></canvas>

CSS: #one { margin-top: 20px; } (Other styles are omitted here)

Analysis: This is CSS margin collapse. When the parent element height is auto , the child element is a block-level element, and the parent element has no padding and border , the height of the parent element will be affected by the child element margin-top .<canvas></canvas> The height of an element is calculated automatically, while "one" is a block-level element, its margin-top and<canvas></canvas> The top margins of<canvas></canvas> The height of the body increases, thus moving downward as a whole.

Solution: There are several ways to avoid margin collapse:

1. Set the parent element height:<canvas></canvas> The element specifies a clear height value, for example height: 100px; .
2. Add border or inner margin: Add border or padding to the parent element, such as border: 1px solid #ccc; or padding: 10px; .
3. Use inner margin instead of outer margin: Replace margin-top with padding-top .
4. Use floating or absolute positioning: set float: left; or position: absolute; for child element "one".

By understanding the mechanism of margin collapse, we can better control the CSS layout and avoid similar problems.