Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize Outer margin merging by css

2025-01-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve css margin merger, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

The separation (superposition) of outer margins is a commensurate and easy point of view. However, when laying out a web page in practice, it will cause a lot of confusion.

To put it simply, the outer margin merger means that when two vertical outer margins meet, they will form an outer margin. The height of the outer margin after the merger is equal to the greater of the two heights that produce separate outer margins.

When an element is on top of another element at that time, the lower outer margin of the first element and the upper outer margin of the second element will merge. Please take a look at the following picture:

Try it for yourself

When an element is included in another element (assuming there is no inner margin or border to separate the outer margin), their upper and / or lower outer margins are also merged. Please take a look at the following picture:

Try it yourself.

Although it may seem strange, the outer margin can even become angry and merge with yourself.

If there is an empty element, it has an outer margin, but no border or fill. In such an environment, the upper and lower margins meet together, and they merge:

If this outer margin encounters the outer margin of another element, it will also give rise to merging:

This is the reason why a series of paragraph elements take up very little space, because all their outer margins are separated and scattered together, forming a small outer margin.

At first glance, the annexation may seem strange, but in fact, it is implied. Take a model text page made up of several paragraphs as an example. The space above the first paragraph is equal to the upper margin of the paragraph. If there is no outer margin merger, the outer margin between all subsequent paragraphs will be the sum of the adjacent upper margin and the lower margin. This means that the space between paragraphs is twice as large as that at the top of the page. If the outer margin of the fire is separated, the upper outer margin and the lower outer margin between the paragraphs will be merged together, so that the partition everywhere will be the same.

Note: only the vertical outer margin of the block box in the ordinary document flow will give birth to the outer margin separation. Inline boxes, floating boxes, or outer margins relative to positioning are not merged.

Thank you for reading this article carefully. I hope the article "how to merge css" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 265

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report