Code, there will be a short space below when you import a picture in a webpage. In the Google browser debugging, you will find that the outer layer <a> element height is more than the height of the 3 pixels (this time has been set a{display:block;} ）。 This is a headache in web design, sometimes because of such a small blank space causes the picture can not be aligned and so on. Of course, there are those who say
Analysis Reason: There is a very good article about it. Links: http://www.zhihu.com/question/21558138/answer/18615056
To understand this problem, first understand the meaning of CSS for the vertical-align values of the display:inline element. The default value for Vertical-align is baseline, which is the concept of a Western typesetting:
&amp;amp;amp;lt;img src= "Https://pic2.zhimg.com/f0f1e7625a10b204bc32c7203835740d_b.jpg" Data-rawwidth= "570" data-rawheight= "175" class= "Origin_image zh-lightbox-thumb" width= "570" data-original= "https:// Pic2.zhimg.com/f0f1e7625a10b204bc32c7203835740d_r.jpg "&amp;amp;amp;gt; can see that the baseline below is P Ah, q Ah, g Ah, the tail under these letters. As you can see, the one that appears under baseline is P, Q Ah, G ah, the tail under these letters.
Compare the other two common values of vertical-align, top and bottom:
&amp;amp;amp;lt;img src= "Https://pic1.zhimg.com/fa1bef7a27a3c235a2e9bd8de5ba5448_b.jpg" Data-rawwidth= "571" data-rawheight= "175" class= "Origin_image zh-lightbox-thumb" width= "571" data-original= "https:// Pic1.zhimg.com/fa1bef7a27a3c235a2e9bd8de5ba5448_r.jpg "&amp;amp;amp;gt;
You can see that there is a certain distance between baseline and bottom. In fact, the blank space underneath the inline picture is exactly the distance between baseline and bottom. Even if only the picture has no text, as long as the picture of the inline blank will exist.
Here is more obvious, to get rid of this blank, the most straightforward way is to set the image vertical-align to other values. If there are words mixed in the same line, it should be better to use bottom or middle.
In addition, the value between top and bottom is line-height. If the line-height is set to 0, then the distance between baseline and bottom becomes 0, then the gap is gone. If you do not set the default value for Line-height,line-height is based on font-size, depending on the rendering engine, it is generally multiplied by a factor (such as 1.2). Therefore, the same effect can be achieved if the font-size is set to 0 without setting the line-height. Of course, the consequence of this is that you cannot mix the pictures.
in combination with the above, there are three basic methods of solving this problem:1. The simplest and most effective method: Img{display:block;} 2.img{vertical-align:bottom;} 3. Set the parcel layer line-height:0, or set the font-size:0, this method I have tried, because the individual is not very much in favor of this method, because the first two methods better, semantically also plausible. 4. This method is my own thought out, has been confirmed: Also take the article at the beginning of the example, because the picture below a blank cause <a> height is higher than the height of 3 pixels, so you can directly set the package layer <a The height of the > is the height of .
About the import picture below There is a blank problem solution
