Summary of frequently encountered problems when using css margin-top

In CSS styles, the margin-top attribute sets the top margin of an element. It can allow negative values. The default value for defining fixed top margin is 0. All major browsers support the margin-top attribute. Through this article, we will specifically talk about some problems often encountered when using the margin-top attribute in front-end pages. What should I do if the setting affects the parent element? What should I do if the margin-top attribute does not work? etc.

1. What should I do if the margin-top setting affects the parent element?

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

Principle: margin folding (Collapsing Margins)

Two or more adjacent margins (margin) will merge in the vertical direction into a margin. The adjacency here means that there is no upper and lower padding-top, padding-bottom, border-top, border-bottom, and the element content is not empty.

The most common margin folding is when

elements are juxtaposed. Each p has a margin of 1em above and below, but adjacent p's will only display a 1em interval instead of 2em.

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

There are many solutions:

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

2) Use padding instead of margin

3 . Adding margin-top to child elements will increase the problem for the parent element

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

There are also solutions, specifically:

1) Modify the parent element Height, add padding-top style simulation (padding-top:1px;)

2) Add overflow:hidden;

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

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

5) Declare absolute positioning for the parent element or child element

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

two . What should I do if the margin-top attribute does not work?

1. Causes and solutions for firefox margin-top failure

The margin-bottom of a floated block-level element is always adjacent to the margin-top of the floated next in-flow block-level sibling element (floated next in-flow block-level sibling). , unless that sibling element uses a clear operation.
The margin-top of a floating block-level element is adjacent to the margin-top of its first floating block-level child (floated first in-flow block-level child) (if the element has no border-top, no padding-top, and child elements are not cleared).

2. margin-top fails, CSS box model margin merging problem in css + div layout

In In regular document flow, adjacent vertical margins of two or more block-level box models will be collapsed. The final margin value calculation method is as follows:
a. If all are positive values, take the largest one;
b. If not all positive values, take the absolute value, and then subtract the maximum value from the positive value;
c. If there is no positive value, take the absolute value, and then subtract the maximum value from 0.

3. Several reasons why the css margin-top attribute does not work

Reason 1: Margin merging The margin-top property is invalid.

Reason 2: Child elements and parent elements may also cause the set margins on child elements to become invalid

Q&A related to margin-top attribute

1. Ask me about margin-top

2. Put a small div inside a large css div, and set the margin-top attribute on the small div. Why does the big div also float? Picture

##3 . Why does the margin-top setting on child elements affect the parent element?

【Related recommendations】

1.

Summary of css margin properties and usage

The above is the detailed content of Summary of frequently encountered problems when using css margin-top. For more information, please follow other related articles on the PHP Chinese website!