Summary of frequently encountered problems in CSS margin-top usage

In CSS styles, the Margin-top property sets the top margin of the element. It can allow negative values to be used. The default definition of the fixed top margin value is 0. All major browsers support the Margin-top property. Through this article we come to the specific point of use in the front-end page of the Margin-top property frequently encountered some problems, such as the setting after the impact of the parent element? Using the Margin-top property does not work how to resolve it? Wait a minute.

First, margin-top after setting affects the parent element what to do?

1. How to solve the problem of margin folding from child element margin-top affecting parent element derivation

Principle: Margin Folding (collapsing Margins)

Adjacent two or more margin (margin) are merged into one margin in the vertical direction. here the adjacent refers to no upper and lower Padding-top,padding-bottom,border-top,border-bottom, the element content is not empty.

The most common margin folding is when the <p> element is tied together, each p has a margin of up and down 1em, but the pro P will only show the 1em interval instead of 2EM.

2. Why does the margin-top of CSS child elements affect the parent element

More Solutions:

1) Add Overflow:hidden or padding, border to the parent;

2) Use padding instead of margin

3. Child elements increase margin-top will increase the problem to the parent element

The margin-top of the child element does not separate the child elements from the parent element, but the effect is equivalent to adding a margin-top to the parent element;

The solution is also available, specifically:

1) Modify the height of the parent element to increase the Padding-top style simulation (padding-top:1px;)

2) Add Overflow:hidden to the parent element;

3) floating for parent element or child element life element (Float:left; available but not recommended)

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

5) Declare absolute positioning for parent or child elements

6) Add content generation to parent element #father:before{content: ';d isplay:table};

Second, the use of the Margin-top attribute does not work how to solve?

1. Reasons and solutions of Firefox margin-top failure

The margin-bottom of a floating block-level element is always adjacent to the sibling of the floating block-level sibling element (floated next In-flow block-level margin-top) behind it, unless the same sibling element uses the purge operation.
The margin-top of the floating block-level element and its first floating-block-level child element (floated-in-flow block-level children) are adjacent to Margin-top (if the element does not have border-top, There is no padding-top, and the child element is not using the purge operation).

2. Margin-top invalidation, CSS + div layout CSS box model margin merge problem

In a regular document flow, the vertical margin adjacent to 2 or more block-level box models is collapsed. The final margin value is calculated as follows:
A, all are positive, take the largest person;
b, not all positive values, then the absolute value is taken, and then minus the maximum with a positive number;
C, without a positive value, take absolute values and subtract the maximum by 0.

3. CSS Margin-top properties do not work for several reasons

Reason one: The margin merge Margin-top property is invalidated.

Cause two: child elements and parent elements may also cause a child element to be set up on margin failure condition

Margin-top Properties related questions and Answers

1. Ask Margin-top questions

2. css Big div inside put small div, small div set margin-top attribute, why Big Div also floated up, have figure

3. Child element Setting Margin-top Why does it work on the parent element?

"Recommended"

1. CSS margin margin properties and usage summary