Explore the mysterious “ghost void node”

When writing CSS code in your daily development, you often encounter some strange phenomena. Consider the following scenarios

Figure 1

Figure 2

In Figure 1, why is there a blank height below the picture? In our normal knowledge, the height of a block-level element defaults to 0 when no specific value is set, and the height is supported by the content. Where does the height of the

Antecedents feed

First of all, we need to understand a concept called baseline. In all inline correlation models, everything related to vertical layout or alignment can not be separated from the most basic base-line. Then how is baseline defined? Wikipedia has this schematic:

Figure 3

The bottom edge (line) of the letter X is the baseline as indicated in the picture.

In the CSS, there are two important attributes, line-height and vertical-align, which are related to baseline. The line height of line-height is defined as the distance between two baselines. The default value of vertical-align is baseline alignment. For inline elements, realize that although vertical-align and line-height are invisible, they are actually everywhere!

So how do you confirm the baseline of the tag element? In the CSS2 visual Format model document there is a paragraph like this:

The baseline of an ‘inline-block’ is The baseline of its last line box in The normal flow, Unless it has either no in-flow line boxes or if its’ overflow ‘property has a computed value other than’ visible ‘, In which case the baseline is the bottom margin edge.”

For an inline-block element, if there are no inline elements or overflow is not visible, the element’s baseline is the bottom edge of its margin. Otherwise, the baseline is the baseline of the last inline element in the element.

The second thing we need to understand is a concept called the Line boxes model. Here’s a simple code:

 <p>This is a normal line of text. There's a<em>em</em>The label.</p>
Copy the code

There are four boxes involved in this code:

• Containing blocks containing

  tags

• 2. Then there are inline boxes, as shown in the image below, which do not display content in blocks but in a row

Figure 4.

• 3. In containing boxes, inline boxes form line boxes.

• 4. Content area refers to an invisible box surrounding text, the size of which is only controlled by the character itself. It is essentially a character box, but some elements, such as images, are clearly not text. Therefore, for these elements, the content area can be viewed as the element itself.

In the line box model, the height of the inline boxes is directly controlled by line-height, whereas the true height is represented by the number of inline boxes per row (equal to the height of the highest inline box inside). The height of these line boxes is vertically stacked to form the height of containing boxes, that is, the height of the

or

Find “Ghost blank Nodes”

Let’s modify the code in Figure 1 slightly as follows:

Figure 5

For inline elements, the default value of vertical-align is baseline, so we see that both the image in the

Figure 6.

The character X itself has height (determined by the font size attribute).

Figure 7.

The height of the SXX row box in the view is determined by the line-height property.

According to the above three changes, we can see that due to the default alignment of vertical-align and line-height, there will be a gap under the image when the image needs to be aligned with other elements. But in Figure 1,

has only the
tag, but there is still a gap at the bottom. Who is it aligned with? Where is the so-called “ghost blank node” hidden?

Don’t worry, let’s move on to the code in 2 and modify it as shown below:

Figure 8.

Figure 9.

Figure 10.

Compared to the previous three code changes, when is blank and inline box, the div still seems to have a blank node with an X character to hold up the height of the line box. To help us understand, here we can think of the character X as an image of a “ghost blank node”. It has no width, is invisible and cannot be accessed in any way, but appears to be real, and its size is affected by font size. This is the “blank ghost node” we’ve been looking for. Although hidden so deep, we are still step by step to find out.

Recognize “Ghost blank Nodes”

There is a sentence in the HTML5 specification:

“Each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a ‘strut’.”

Each line box starts with a zero-width line inner box with the element’s font and line height properties. We call this imaginary box the prop.

In HTML5 document declarations, all parsing and rendering of inline elements behaves as if there were a “blank node” in front of each line-box. This “blank node” transparent forever, does not occupy any width, see also is unable to get through script, like a ghost, but it really exists, behave like a text node, therefore, in his book the CSS world Zhang Xinxu bosses, according to the characteristics of call it “ghost blank nodes”, namely “struts” in the official specification.

Eliminates the effect of ghost blank nodes

Having finally found and recognized the “ghost blank node”, how do we eliminate the influence of this unattainable “node” that really affects our style?

• 1, letvertical-alignFailure:vertical-alignAttributes are insensitive to block-level elements, so we only need to set them for the elementdispalyforblockCan;
• 2, modify,vertical-alignProperty value: Changes its default valuebaselineValue is the value of other attributes so that it is no longer aligned with the baseline;
• 3, modify,line-heightValue of: We said aboveline-heightIs defined as the distance between two baselines, so in the above example, the space below the image is actually the distance between the line height calculated by the “ghost blank node” and the baseline, so as long asline-heightSmall enough to eliminate the gap under the image. (Note that this is to be indivSet online-heghtAnd then letdivtheinline boxesinheritanceline-heightAttributes)

conclusion

CSS world looks be like simple, but hides the countless “mystery”, in the process of work and study, to discover the mystery of the mining of, not only can make us more clear of its cognition, at the same time in the process of our programming can be more flexible to use CSS to enrich our page, let us page more flesh plump, rendering more wonderful.