A classic solution to cross-border problems in CSS

8.CSS Related knowledge

(1) How to solve the Margin-top cross-border problem of the first child element of a parent element

1) Adding border-top:1px;--to the parent element has side effects

2) specify padding-top:1px;--with side effects for parent element

3) Specify overflow:hidden;--with side effects for parent element

4) Add predecessor content generation for parent element--Recommended use

. parent:before {

Content: ";

display:table;

}

(2) How to resolve all child elements floating stepfather element height to 0 and affect subsequent elements

1) Specify overflow:hidden;--with side effects for parent element

2) Specify a height for the parent element: height:xxx;--has limitations

3) Add post-build content to parent element--recommended

. parent:after {

Content: ";

display:table;

Clear:both;

}

A classic solution to cross-border problems in CSS