Proficient in CSS advanced Web standard solutions: Adding blank borders

2.1.2 adding blank edges

Adding blank edges is a simple concept. However, it may cause a lot of confusion when layout webpages in practice. Simply put, when two vertical blank edges meet, they form a blank edge. The height of the blank edge is equal to the height of the two blank edges that are superimposed.

When an element appears on another element, the blank edge at the bottom of the first element overwrites the blank edge at the top of the second element (see Figure 2-4 ).

Figure 2-4 top blank edges of an element overlay the bottom blank edges of the preceding Element

When an element is contained in another element (if it is not filled or the border is separated by blank edges), their top and/or bottom blank edges are also superimposed (see Figure 2-5 ).

Figure 2-5 top blank edges of an element overlay the top blank edges of the parent Element

Although it seems a bit strange at the beginning, the blank side can even overlap with itself. Suppose there is an empty element with blank white edges but no borders or fill. In this case, the top blank side and the bottom blank side are met, and they will be superimposed (see Figure 2-6 ).

Figure 2-6 overlay the top and bottom blank edges of an element

If this blank edge hits the blank edge of another element, it will also overlay (see Figure 2-7 ).

Figure 2-7 overlay the existing blank edge of an empty element with the blank edge of another empty Element

This is why a series of empty section elements occupy a very small space, because all their blank edges are superimposed to form a small blank edge.

It may seem a bit strange to overlay the blank side, but it actually makes sense. Take a typical text page composed of several paragraphs as an example (see Figure 2-8 ). The space above the first paragraph is equal to the top blank side of the paragraph. If there is no blank side overlapping, the blank side between all subsequent sections will be the sum of the adjacent top blank side and the bottom blank side. This means that the space between paragraphs is twice that at the top of the page. If a blank edge is superimposed, the top and bottom blank sides of the Section are superimposed, so that the distance between the sections is the same.

Figure 2-8 the blank side overlays to maintain a consistent distance between elements

Only the vertical blank edges of the block boxes in the normal document stream can overlap the blank edges. The blank edges between the line boxes, floating boxes, or absolute positioning boxes do not overlap.