How does css pay attention to outer margin folding

This article mainly introduces css how to pay attention to margin folding, the article is very detailed, has a certain reference value, interested friends must read it!

Pay attention to the outer margin folding

Unlike most other properties, the vertical outer margin margin of the top and bottom occurs when it exists at the same time. This means that when the lower edge of one element touches the upper edge of another element, only the larger of the two margin values is retained. For example:

HTML

CSS

.square {width: 80px; height: 80px;} .red {background-color: # F44336; margin-bottom: 40px;} .blue {background-color: # 2196F3; margin-top: 30px;}

The distance between the red square and the blue square is 40px, not 70px. There are many ways to solve the outer margin folding. For beginners, the easiest way is to use margin in only one direction for all elements. For example, we use margin-bottom for all the upper and lower margins.

The above is all the content of the article "how to pay attention to margin folding by css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!