Margin collapse:

The upper and lower margins of block-level elements sometimes merge, and the merged margins equal the larger values of the previous two margins. This phenomenon is called margin collapse.

There are three cases of margin collapse:

  • Between adjacent elements
  • Between a parent element and its first or last child element
  • Empty block-level elements

Solutions:

Method 1: Set a border for the parent element and reduce the height of the parent element

.father {
	height: 199px;
	width: 200px;
	background: gray;
	border-top: 1px solid gray;
}
Copy the code

Method 2: The parent element increases the inner margin and decreases the height of the parent element

.father {
	height: 199px;
	padding-top:1px;
	width: 200px;
	background: gray;
}
Copy the code

Method 3: Add attribute Overflow: Hidden to parent element

.father {
	overflow: hidden;
	height: 200px;
	width: 200px;
	background: gray;
}
Copy the code