Margin related techniques for Box Models !, Box margin

Margin related techniques for Box Models !, Box margin

If you are not talking nonsense, go to the topic and use margin-related techniques.

1. Set the horizontal center of elements: margin: x auto;

2. The negative value of margin merges the element displacement and border.

Outer margin merge

When two vertical margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins.

How to solve the outer margin merge:

A. Use this feature.

B. Set the margin on one side. Generally, set margin-top.

C. Float or locate an element (when the element is floating or positioned, there will be no margin merge)

Margin-top collapse

When two boxes are nested, the margin-top set in the internal box is added to the outer box, causing the internal box margin-top setting to fail. The solution is as follows:

A. Set a border for the external box

B. Set overflow: hidden for the external box.

C. Use pseudo element classes:

. Clearfix: before {

Content :'';

Dispaly: table;

}