Page132-5.3 Good friend of line-height vertical-align

.box { line-height: 32px; } 
.box > span { font-size: 24px; } 
<div class="box"<span> </span> </div>Copy the code

As the author explains here, we can clearly see two characters of completely different sizes. In one place, the letter X forms an “anonymous inlined box”, and in the other place, the element where the “word X” is located forms an “inlined box”. Height: 32px Thus, the height of both “inline boxes” is 32px. Because for characters, the font characters – the larger the size of base line is down, because the default text are all baseline alignment, so when pride is different to the size of the two words together, each other happens displacement, displacement distance, if large enough, can go over the line height limit, which leads to the height of the unexpected. The final container height in this example is 36px instead of 32px as set. Here I looked along while, how to come out more 4px ？？？？ Don’t get it… We’ll look into that later

.box { 
 width: 280px; 
 outline: 1px solid #aaa; 
 text-align: center; 
} 
.box > img { 
 height: 96px; 
}
<div class="box"> 
 <img src="1.jpg"> 
</div>
Copy the code

In this case, there was an extra 5px gap at the bottom of the.box element for no reason. The three main culprits of gap generation are “ghost blank nodes”, line-height and vertical-align attributes. Solutions:

  1. Picture blocky. You can kill “ghost blank”, line-height and vertical-align in one go.
  2. The container line-height is small enough. As long as the half-line spacing is small to the letter X off-duty element position or above, naturally there is no space to support the bottom clearance height. The line – height: 0;
  3. The container font size is small enough. Font-size: 0; font-size: 0;
  4. Image Set other vertical-align property values. One of the reasons for the gap is the baseline alignment, so we set vertical-align to either top, middle, or bottom.
<div class="box"> 
 <img src="mm1.jpg"> 
</div> 
.box > img { 
 height: 96px;
  margin-top: -200px; 
}
Copy the code

The image is not completely outside of the container, it is still partially inside the.box element, and even if margin-top is set to -99999px, the image will not move any further up, completely invalid. Because there is a “ghost blank node” in front of the image, and in the CSS world, inline elements that do not actively trigger displacement cannot go out of the calculator container, resulting in the image position is defined by the vertical-align: baseline of the “ghost blank node”. What is the meaning of an inlined element of a non-active departure displacement ？？？？？ Life can help us achieve compatible list alignment, but text-align: Justification requires more than one line of content, and in order to justify the last line of any number of lists to the left, we need an empty label element at the end of the list that is the same width as the list.

Page135 –5.3.4 In-depth understanding of vertical-align linear class attribute values