You don't know margin. You don't know margin.

You don't know margin. You don't know margin.

Today, let's record my understanding of margin for future review.

Set the margin of the element in the margin attribute.

What is the margin? Let's take a look at the CSS box model.

The outer border is the outer margin, and the outer margin is transparent by default, so it does not block any subsequent elements.

I think the most appropriate analogy is the house. There is an element in the room, and the distance between it and the wall is padding. The wall thickness is border. The distance between houses is margin.

Therefore, margin focuses on the spacing between two irrelevant elements.
The padding describes the whitelist between the child element and the parent container.

Misunderstanding of margin

• Percentage of margin values

When margin-top is a percentage, it is actually adjusted according to the percentage of the width of the parent container...
'Margin-top', 'margin-bottom'
Percentages: refer to width of containing block
It has been a problem for me for a long time.

• Vertical margin of a margin block-level element

When both adjacent block-level elements are set to margin: 20px, their vertical interval is not 40px, but 20px. This interval is determined based on the comparison between the two. For example, homeowner A asks other houses to be at least 20 PX away from me, while homeowner B says that my requirements are relatively low, as long as the distance is 10 PX, their interval is 20 PX, otherwise A will be very uncomfortable with e.

However, note that only the display: block element is used here, while the display: inline element in the row does not occupy the upper and lower margins, and the left and right margins of the element in the row are not merged. The upper and lower margins of the line block elements (display: inline-block) are not merged.

• Margin-top
  

Once I used margin-top, I found a strange problem. When I set block element (display: block) margin-top, it squeezed the entire page...

The position: absoulte of the containers whose bodies are the parent container must be moved down. The solution is to add an overflow: hidden or padding-top ~ to the parent container with the first element of margin-top added ~;

• The margin value is negative.
  

When the margin value is set to a negative value, there are many visual illusions.
Recommended reading: I know what you don't know about negative Margin-haiyu