Author: Li Yirui

Height is an old friend that you see a lot of. But then one day, I suddenly realized that I didn’t seem to know him that well, and there was more to him than meets the eye.

Here’s what happened…

In one of my occasional jobs, I wrote this template:

<div>
    <span class="name">Critical Disease insurance</span>
    <span class="tip">The amount insured can be accumulated every month</span>
</div>
Copy the code
div{
    font-family: "PingFang SC";
}
.name{
    line-height: 20px;
    font-size: 20px;
}
.tip{
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}
Copy the code

The second span is inline-block because the text in the second paragraph needs to be automatically removed from the next line if there are too many words, so the result is that both span height is 20px, div height is 20px, perfect. But the results are often disappointing…

Div is 28.


Look at the children, 28 and 20??

  • Question 1: Does line height not apply to inline elements?

    However, the specification tells me that for non-substitute inline elements, it is used to calculate the height of the line box.

  • Question 2: if it works, why does the review element look 28 instead of 20?

    For text, there is a Content Area. You can think of it as the area with the background when you select the line of text with the cursor. It is influenced by both font-family and font-size. Even if the font size is the same, if the font is different, the height of ‘what you see’ is different. Students can try it out for themselves. It’s important to note that what you see here, 28px, is actually the height of the content area of the text, and the height of the content area is not the actual height, that is, it doesn’t affect the actual size of the element, nor does it hold up the height of the parent element, so it’s just the height you see. For inline elements, what really matters is line-height.

    Here, we can verify this by changing their font-family.

      div{
      font-family: "HelveticaNeue";
  }
  .name{
      line-height: 20px;
      font-size: 20px;
  }
  .tip{
      display: inline-block;
      line-height: 20px;
      font-size: 14px;
  }
Copy the code

    As you can see, the height of.name has changed from 28 to 24, the height of.tip remains the same because it is inline-block, but the height of the parent div remains 28px, indicating that the content area does not affect the true height of the parent element.

  • Question 3: Then how do you see its true height?

    As you may have noticed, the second span isinline-blockIts height is 20px, so we’ll be the first onespanAlso set toinline-blockLet’s see.



    Sure enough, it finally got the 20px height we were hoping for.

    So let’s look at the parent elementdivHeight:



    !!!!! Why is it 28px??

  • Question 4: Two child elements are already 20px, why is the parent element still 28px?

    Two questions will be declared:

    1. The content Area does not affect the actual size. Now the element is 20px, but the parent element is still 28px.
    2. We set the first span toinline-blockAfter that, you can see that its size has changed to 20px, but that doesn’t mean it doesn’t have a Content Area, or that its Content area has changed to 20px. You can see that we put a box on the outside, and you can see the actual size of the box, and the Content Area is inside it, you just can’t see it. Moreover, it is a thing that affects no one.

    Going back to our problem, if you look closely at the image above, you can see that there is a gap between the two child elements, each 20px high; And when you look at it again, it doesn’t line up, the one with the red background is up, the one with the pink background is down, and there’s a slight mismatch between them. That’s all that’s keeping our parent element stretched to 28px. And where did they come from?

    If the parent element is stretched, then the align attribute in the CSS is vertical-align. Let’s try changing their vertical-align:

    vertical-align:topThe top face is uneven

     

    Vertical-align :middle

    Although none of these attribute values can align them, we can see that they are related to it, maybe we are not using it properly, affecting this attribute? Vertical-align = baseline align = baseline align = baseline align = baseline align = baseline

    Inline elements are aligned with baseline by default, which is the lower edge of the letter ‘x’ in the line box:

    Aye? ? If you take a closer look at our previous image, you will see that although the elements are not aligned, the bottom of the text is aligned. This is normal baseline alignment. That makes a lot of sense.

    Highlight!!

    The default alignment for inline elements is baseline alignment, which means they are aligned with the bottom edge of x. These two spans are the same height, 20px, but the important thing is that they have different font sizes. If the text is set to line-height, it will be centered based on line-height. That is, they will be centered in the same box with the same height, but the text will not be aligned at the bottom because of the different size, but they need to be aligned at the baseline, so they will have to be misaligned.

    Here is a reference to xinxu dashen’s picture:

  • Question 5: Does this mean that if we set the row heights of the two elements to be different, we can raise the parent element in the right place?

    Here we set the line heights of the two spans to the same size as our font: 20px and 14px. You can see that they are not out of place anymore, but the parent element is still 28px. What’s going on? Is there something else affecting it?

    You’re right, but it’s something we can’t see. Quote zhang Xinxu god called — ghost blank node.

    “Ghost white space node” is a very important concept in the inline box model. Specifically, it refers to the fact that in HTML5 document declaration, all the parsing and rendering of inline elements behaves as if there were a “white space node” in front of each line box. This “blank node” is always transparent, does not take up any width, is invisible and cannot be accessed by script, is like a ghost, but is actually there and behaves like a text node, so I call it “ghost blank node”.

    Since we can’t see it, we can pretend it with a visible X character.

      <div>
      <em>x</em>
      <span class="name">Critical Disease insurance</span>
      <span class="tip">The amount insured can be accumulated every month</span>
  </div>
Copy the code
      div{
      font-family: "PingFang SC";
  }
  em{
      display:inline-block; /* To review the element, see the content area*/
      font-style:normal;
  }
  .name{
      line-height: 20px;
      font-size: 20px;
  }
  .tip{
      display: inline-block;
      line-height: 20px;
      font-size: 14px;
  }
Copy the code

    The ‘x’ size is unset, and the line height is inherited at 20px. The default line height of the element is 1. X. This means that the height of the ghost blank node is 28px.

    Why don’t we make the row height of the ghost blank node smaller? But this ghost node, you can’t see it, you can’t touch it. Remember that line-heigt is inheritable, so if we set line-heigt to the parent div, the ghost node will inherit.

How to solve

Understand the above questions and principles, let’s look at how to solve this problem.

To solve a

We can set line-height to a very small value for the parent div

div{
    line-height: 5px;
    font-family: "PingFang SC";
}
em{
    display:inline-block; /* To review the element, see the content area*/
    font-style:normal;
}
.name{
    line-height: 20px;
    font-size: 20px;
}
.tip{
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}
Copy the code


Thus, the ghost node’s line height is only 5px and the parent element’s line height is 20px, fine. But this method is not perfect, because you need to think about this small value…

Solve the two

When line-height is set to a unitless value, it indicates a multiple of font size.

div{
    line-height: 1;
    font-family: "PingFang SC";
}
em{
    display:inline-block; /* To review the element, see the content area*/
    font-style:normal;
}
.name{
    line-height: 20px;
    font-size: 20px;
}
.tip{
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}
Copy the code

Give the parent element a line-height of 1, so that the child element has its own font size, including ghost blank nodes. So no one can inadvertently push up the parent element. Unless, of course, your ghost whitespace node inherits a very large font size, which you need to understand.


To solve the three

Since the row height can be dependent on font size, and font size is inheritable, let’s set font size to 0 for the parent element

div{
    font-size: 0px;
    font-family: "PingFang SC";
}
em{
    display:inline-block; /* To review the element, see the content area*/
    font-style:normal;
}
.name{
    line-height: 20px;
    font-size: 20px;
}
.tip{
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}
Copy the code


As you can see, the ghost node that we modeled is gone and is now 0 in width and height, so the parent element’s height is naturally back to 20px.

conclusion

Above, it can be said that I on the line element alignment problem of some thinking summary. If you’re still in doubt, watch it a few more times, try it out for yourself and think again. This is a question I have been back and forth on many times, and I welcome your comments and questions. We can discuss it together

Front small white, there are mistakes or incomplete explanation of the place, but also hope big men mouth mercy, welcome correction ~