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.

The above is the detailed content of CSS margin collapse: Why does my margin-top move the parent element?. For more information, please follow other related articles on the PHP Chinese website!