When a child element is added with margin-top, it will be added to the parent element. The element margin-top

When a child element is added with margin-top, it will be added to the parent element. The element margin-top

Suppose we have the following code:

<Div id = "father" style = "height: 400px; width: 400px; background: # e4393c;">
<Div id = "child" style = "background: green; height: 100px; width: 100px; margin-top: 40px;"> </div>
</Div>

The results are as follows:

The sub-element's margin-top does not separate the sub-element from the parent element, but the effect is equivalent to adding a margin-top to the parent element;

The solution is as follows:

1. Modify the height of the parent element and add the padding-top style simulation (padding-top: 1px ;)

2. Add overflow: hidden to the parent element;

3. float: left (available but not recommended)

4. Add border (border: 1px solid transparent) to the parent Element)

5. Declare absolute positioning for the parent or child element

6. add content generation to the parent element # father: before {content: ''; display: table };