[CSS] vertical-align and Line-height

Original link: http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

First, Inline-block and baseline

A inline-block element, if there is no inline inline element in it, or if overflow is not visible, then the baseline of the element is its margin, otherwise its baseline is the baseline of the last line inline element inside the element.

. dib-baseline {  display:inline-block; width:150px; height:150px;  border:1px solid #cad5eb; Background-color: #f0f3f9;}

<span class= "Dib-baseline" ></span><span class= "Dib-baseline" >x-baseline</span>

As a result, Koko:

X-baseline

Will find that the size, display level is the same, the result, two is not on a horizontal line alignment, why? Haha, the above specification has already explained everything. There is no inline element in the first box, so the baseline is the bottom edge of the container, which is the position below the bottom border, and the second box has characters, pure inline elements, so the second box is the baseline of these characters, which is the lower edge of the letter x. As a result, we see the bottom edge of box 1 and the top of the box 2 characters x . Box 2 There is a small egg, click can toggle it innerHTML , will find that if the box 2 inside no text, and the box 1 Juanjimei.

Now we're going to do a very necessary thing to help us understand the performance of the above complex example line-height 0 after the value, what is it? Ha, the same realm simulation, we also set the value of box 2 line-height as 0 , so, it will be the following performance:

X-baseline

Do you know why Box 2 sank a little bit again?

Because the character actually occupies the height is determined by the row height, when the row height becomes 0, the character occupies the height is also 0 , at this time, the height of the starting position becomes the character Content area Vertical center position, so, the text is half to look at the outside of 2.

As the text character moves up, the natural baseline position ( x the bottom edge of the letter) also moves upwards, so the vertical drop in the two box is even larger.

OK, understand the above simple example, you can understand the above complex examples. Immediately after, if we add the same character after the last placeholder <i> x-baseline , then:

X-baseline

Can everyone understand why?

Amount ~ Incredibly still have a small partner frown, then I explain again in words:
Now the line height line-height is 0 , then the final x-baseline vertical midline is aligned with the picture in the above column, and the baseline, just below the midline of about half x height, and this height drop is the last picture and the container clearance height value, because the front <i class="justify-fix"> is an empty element, The baseline is the bottom of itself, haha, make the industry ah!

OK, once you know the nature of the phenomenon, we can easily the right remedy! Either transform the <i> baseline of the placeholder element, or transform the baseline position of the Phantom Blank node, or use a different vertical-align alignment ~

First, one of the most interesting ways, right, is to transform the <i> baseline of the placeholder element . This is simple, right, just put a few characters in the empty <i> element, for example, there is a x :

xX-baseline

Will find that the gap is gone! Why is it? Haha, because the baseline of the <i> element and the "Phantom Blank Node" of the baseline position is now consistent, without dislocation, there will be no gap!

change the baseline position of "Ghost blank Node" , haha, use font-size , font enough hours, baseline and midline will coincide together, when the font is small enough, that is 0 . The CSS code ( line-height if it is a relative value, line-height:0 can also be omitted):

div {font-size:0;}

using other vertical-align alignments is the list element that aligns the two sides vertical-align:top/bottom/... .

div {line-height:0;}. justify-fix {display:inline-block; width:128px; vertical-align:top;}

The final result is:

NN, all kinds of methods are perfect to solve the problem of vertical clearance, to, each big praise!

[CSS] vertical-align and Line-height