View the reason why the margin-top style of the HTML child element is applied to the parent Element

Description

When you set a margin-top style for an element on the page, if the element has a parent element, the margin-top applies to the parent element, and the top of the child element overlaps with the top of the parent element. Example

<style>
body{margin:0; padding:0;}.outerdiv{background: #333;}.innerdiv{margin-top: 30px; background: #d33; height: 80px;}</style><div class="outerdiv">
　　<div class="innerdiv"></div>
</div>

As shown in the code above, the display effect is not as expected.

Cause Analysis

For this reason, you must first take a look at the definition of margin in the CSS document. Let's take a look at the basic definition.

The margin is centered around the blank area of the element border. When the margin is set, an extra "blank" is created outside the element ".

The simplest way to set the margin is to use the margin attribute, which accepts any length unit, percentage value, or even negative value.

This definition does not mention why this problem occurs. Let's look at it again.Outer margin mergeThis section.

The outer margin merge means that when two vertical outer margins meet, they form an outer margin.

The height of the merged margin is equal to the larger of the two merged margins.

When an element appears on another element, the bottom margin of the first element is merged with the top margin of the second element.

When an element is contained in another element (if there is no padding or the border separates the outer margin), the upper and/or lower margins are also merged.

The margin can even be merged with itself.

Here, we can find the problem. Note the fourth article above: When an element is contained in another element (if there is no padding or the border separates the outer margin ), the upper and/or lower margins are also merged.

WhenNo padding or border separates the margins of the two elementsThe outer margin is merged. In our example, outerdiv and innerdiv are exactly the same. Therefore, the innerdiv outer margin is merged with the outediv outer margin, the borders of the two elements must be stacked together, so the above figure appears.

Solution

You can solve the problem by knowing the cause. We only need to separate the two margins. There are many ways to separate the two margins.

1. Set padding for the parent Element

2. Set border for the parent element or child element

3. Add a non-empty element before the child element.

4. Declare floating flat: left for the parent or child element

5. Declare absolute positioning for the parent or child element

6. Apply the overflow: hidden attribute to the parent element (recommended)